Posisjonering i forhold til absolutt forelder i CSS
I forrige leksjon fant vi ut at,
hvis en forelder gis relative, vil
dens etterkommere bli posisjonert absolutt
i forhold til den. Dette gjøres vanligvis
når man ikke vil at forelderelementet
skal falle ut av normal flyt.
Det kan også være at forelderen har
absolute. I dette tilfellet vil etterkommere med
absolute også bli posisjonert
i forhold til en slik forelder, og ikke i forhold til
nettleservinduet:
<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;
}
:
Lag en firkantet blokk med absolutt
posisjonering på 400px.
Inne i den, lag to flere blokker på 50px.
Plasser den første blokken i øvre høyre
hjørne av forelderen, og den andre blokken - i nedre
venstre hjørne.
