Pozícionovanie vzhľadom na absolútneho rodiča v CSS
V predchádzajúcej lekcii sme zistili, že
ak rodičovi nastavíme relative, tak
jeho potomkovia sa budú absolútne pozícionovať
vzhľadom na neho. Takto sa často postupuje,
keď nechcú, aby rodičovský prvok
vypadol z normálneho toku.
Môže sa stať, že rodič má nastavené
absolute. V tomto prípade sa potomkovia s
absolute budú tiež pozícionovať
vzhľadom na takého rodiča, a nie vzhľadom na
okno prehliadača:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: absolute;
top: 100px;
left: 200px;
width: 500px;
height: 300px;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 1px solid green;
}
:
Vytvorte štvorcový blok s absolútnym
pozícionovaním veľkosti 400px.
Vnútri neho vytvorte ďalšie dva bloky veľkosti 50px.
Umiestnite prvý blok do pravého horného
rohu rodiča a druhý blok - do ľavého
dolného rohu.
