Pozicování relativně k absolutnímu rodiči v CSS
V předchozí lekci jsme zjistili, že
pokud rodiči nastavíme relative, pak
jeho potomci se budou absolutně pozicovat
vůči němu. Takto se nejčastěji postupuje,
když nechtějí, aby rodičovský element
vypadl z normálního toku.
Může se také stát, že rodič má nastaveno
absolute. V tomto případě se potomci s
absolute také budou pozicovat
vůči takovému rodiči, a ne vůči
oknu prohlížeče:
<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;
}
:
Vytvořte čtvercový blok s absolutním
pozicováním o velikosti 400px.
Uvnitř něj vytvořte další dva bloky o velikosti 50px.
Umístěte první blok do pravého horního
rohu rodiče a druhý blok - do levého
dolního rohu.
