Pozycjonowanie względem absolutnego rodzica w CSS
W poprzedniej lekcji omówiliśmy, że
jeśli rodzicowi ustawimy relative, to
jego potomkowie będą pozycjonowani absolutnie
względem niego. Tak postępuje się najczęściej,
gdy nie chce się, aby element nadrzędny
wypadł z normalnego przepływu.
Może się też zdarzyć, że rodzic ma ustawione
absolute. W tym przypadku potomkowie z
absolute również będą pozycjonowani
względem takiego rodzica, a nie względem
okna przeglądarki:
<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;
}
:
Stwórz kwadratowy blok z absolutnym
pozycjonowaniem o rozmiarze 400px.
Wewnątrz niego stwórz jeszcze dwa bloki o rozmiarze 50px.
Umieść pierwszy blok w prawym górnym
rogu rodzica, a drugi blok - w dolnym
lewym rogu.
