Coloque un elemento relativo a otro en CSS

Question

Quiero colocar cuatro div s relativos a otro. Tengo un rectángulo div, y quiero insertar 4 div s en sus esquinas. Sé que CSS tiene un atributo "position:relative", pero esto es relativo a la posición normal de ese elemento. Quiero posicionar mi div s no relativa a su posición normal, sino relativa a otro elemento (el rectángulo). ¿Que debería hacer?

Answer 1

se recomienda usar la posición absoluta dentro del elemento.

He creado este JSfiddle para ayudarlo a visualizarlo un poco.

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute se posicionar el elemento por medio de coordenadas, con relación a la antepasado más cercano posicionado, es decir, el padre más cercano que no es position: static.

Ten tus cuatro divs anidados dentro del div de destino, da el div de destino position: relative, y usa position: absolute en los demás.

Estructura código HTML similar al siguiente:

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

Y esto CSS debería funcionar:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...