Поместите один элемент относительно другого в CSS

Question

Я хочу разместить четыре div относительно другого. У меня есть прямоугольник div, и я хочу вставить 4 div s по его углам. Я знаю, что CSS имеет атрибут "position:relative", но это относительно нормального положения этого элемента. Я хочу поместить мои div s не относительно их нормального положения, а относительно другого элемента (прямоугольника). Что мне делать?

Answer 1

Я хотел бы предложить использовать абсолютное позиционирование внутри элемента.

Я создал этот JSfiddle, чтобы немного визуализировать его.

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute будет позиционировать элемент по координатам, по отношению к ближе всего расположенной предка, т.е. ближайшего родителя, который не является position: static.

Имейте свои четыре divs, вложенные в цель div, дайте цели div position: relative и используйте position: absolute на остальных.

Структура ваш HTML похож на это:

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

И это CSS должно работать:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...