Umieść jeden element względem drugiego w CSS

Question

Chcę ustawić cztery s. div w stosunku do innego. Mam prostokąt div i chcę wstawić 4 div s w jego rogach. Wiem, że CSS ma atrybut "position:relative", ale jest to względne w stosunku do normalnej pozycji tego elementu. Chcę pozycjonować moje div s nie w stosunku do ich normalnej pozycji, ale w stosunku do innego elementu (prostokąta). Co powinienem zrobić?

Answer 1

Sugerowałbym użyciu pozycjonowania bezwzględnego wewnątrz elementu.

Stworzyłem ten JSfiddle, aby pomóc ci go trochę wizualizować.

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute umieści elementu za pomocą współrzędnych, w stosunku do najbliżej usytuowaną przodka, to znaczy z najbliższym nadrzędnego, który nie jest position: static.

Mieć swoje cztery elementy div zagnieżdżone w docelowym elemencie div, podać element docelowy position: relative i użyć position: absolute na pozostałych.

Struktura Twój HTML podobne do tego:

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

I CSS powinno działać:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...