Položte jeden prvok vzhľadom na iný v CSS - css, pozícia, relatívna

Chcem umiestniť štyri divs ohľadom na iné. Mám obdĺžnik diva chcem vložiť 4 divs v jeho rohoch. Viem, že CSS má atribút "position:relative", ale toto je relatívne k normálnej polohe tohto prvku. Chcem umiestniť svoju divnie je relatívne k ich normálnej polohe, ale relatívne k inému prvku (obdĺžnik). Čo mám robiť?

odpovede:

Navrhol by som použitie absolútneho umiestnenia v rámci prvku.

Vytvoril som tento JSfiddle, aby som vám to trochu predstavil.

http://jsfiddle.net/wUrdM/

position: absolute umiestni prvok súradnicami vzhľadom na najbližšieho umiestneného predkanajbližšieho rodiča, ktorý nie je "t." position: static.

Majte svoje štyri divs vnorené vnútri cieľ div, dať cieľ div position: relative, a používať position: absolute na ostatných.

Štruktúra kódu HTML podobného tomuto:

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

A tento CSS by mal fungovať:

#container {
position: relative;
}

#container > * {
position: absolute;
}

.left {
left: 0;
}

.right {
right: 0;
}

.top {
top: 0;
}

.bottom {
bottom: 0;
}

...