Posizionare un elemento in relazione a un altro in CSS

Question

Desidero posizionare quattro div s relativi a un altro. Ho un rettangolo div, e voglio inserire 4 div s ai suoi angoli. So che il CSS ha un attributo "position:relative", ma questo è relativo alla posizione normale di quell'elemento. Voglio posizionare il mio div s non relativo alla loro posizione normale, ma relativamente a un altro elemento (il rettangolo). Cosa dovrei fare?

Answer 1

Io suggerirei di usare il posizionamento assoluto all'interno dell'elemento.

Ho creato questo JSfiddle per aiutarti a visualizzarlo un po '.

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute posizionerà l'elemento da coordinate, rispetto al antenato più vicino posizionato, cioè il più vicino genitore che non è position: static.

Fai dividere i tuoi quattro div all'interno del div target, assegna il target position: relative e usa position: absolute sugli altri.

Struttura il codice HTML simile a questo:

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

E questo CSS dovrebbe funzionare:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...