Come posizionare il div all'interno di un altro div in posizione assoluta?

Question

Per esempio, vorrei creare un modello come nell'immagine qui sotto.

Come si posiziona ciascun div all'interno del contenitore per la sua posizione assoluta? Preferirei senza dover utilizzare gli attributi float. Ogni breve esempio sarebbe apprezzato.

Answer 1

È possibile utilizzare absolute e relative posizionamento.

ad esempio

html

<div id="container" class="box"> 
    <div class="box top left"></div> 
    <div class="box top center"></div> 
    <div class="box top right"></div> 

    <div class="box middle left"></div> 
    <div class="box middle center"></div> 
    <div class="box middle right"></div> 

    <div class="box bottom left"></div> 
    <div class="box bottom center"></div> 
    <div class="box bottom right"></div> 
</div> 

css

#container{ 
    width:200px; 
    height:200px; 
    position:relative; 
    border:1px solid black; 
} 
.box{ 
    border:1px solid red; 
    position:absolute; 
    width:20px; 
    height:20px;  
} 

.top{top:0} 
.middle{top:50%;margin-top:-10px;/*half of the .box height*/} 
.bottom{bottom:0} 

.left{left:0;} 
.center{left:50%;margin-left:-10px;/*half of the .box width*/} 
.right{right:0;} 

Demo ahttp://jsfiddle.net/gaby/MB4Fd/1/

(naturalmente è possibile regolare il posizionamento effettivo per la fiducia accordata, modificando la parte superiore/sinistra/destra/in basso a valori)

Answer 2

Utilizzare position: relative; sul contenitore (uno <div> contenente tutto il contenuto) e posizionare assolutamente gli elementi secondari. Gli elementi figlio all'interno del contenitore saranno posizionati rispetto al contenitore in modo che sia abbastanza semplice posizionare tutto in base alle proprie esigenze.

Tuttavia, È considerato una cattiva prassi utilizzare il posizionamento nella maggior parte dei casi per posizionare il sito. Suggerirei di utilizzare i float anche se dichiari di non volerlo, avrai molta più coerenza tra i diversi browser .

Leggi this articolo se siete confusi su carri