CSS Позиционирование относительно угла Div

Question

У меня есть несколько div в больших div. Можно ли расположить все эти div по отношению к верхнему левому углу родительского div? Это облегчит позиционирование для определенных задач, так как все внутренние координаты divs будут относиться к одной и той же контрольной точке. В настоящий момент использование position: relative просто смещает его положение от того места, где оно было бы без влияния position: relative.

Answer 1

Установите родительский/содержащий div на position:relative. Затем установите дочерние divs на postion:absolute. Затем дети будут расположены абсолютно, но относительно содержащего div, а не по отношению к общей странице.

Вот пример: http://jsfiddle.net/jfriend00/GgNsH/.

HTML:

<div id"otherStuff" style="height: 100px; background-color: #777;"></div> 
<div id="container"> 
    <div id="child1" class="child"></div> 
    <div id="child2" class="child"></div> 
    <div id="child3" class="child"></div> 
</div> 

CSS:

#container {position: relative;} 
.child {position: absolute; height: 10px; width: 10px; background-color: #777;} 
#child1 {top: 10px; left: 10px} 
#child2 {top: 30px; left: 30px} 
#child3 {top: 50px; left: 50px} 

Каждый ребенок будет позиционироваться на это верх/левое значение из верхнего/левого угла контейнера.

Это работает, потому что именно так работает position: absolute. Он позиционирует элемент относительно первого позиционированного родителя (родителя, который имеет значение позиции relative, absolute или fixed), или если родители не расположены, то он использует верхний/левый угол документа в качестве ссылки. Это не трюк, а то, как он документирован, и это очень полезно.