hypatiaMedlem sedan feb. 20011 325 inlägg
Jag försöker lära mig det här med absolut positionering, men har stött på några problem...
Som jag har förstått det hamnar de absolutpositionerade elementen relativt det "närmsta" relativt positionerade elementet.
Jag har då testat att sätta en relativt positionerad div ytterst med fast bredd och lägger divar inuti den. Det funkar bra så länge innehållet i de absolut positionerade divarna inte hamnar utanför fönstret. I så fall störs hela layouten...
Kolla t.ex. här:
http://member.webforum.nu/1547/positionering.html
Footern hamnar inuti containern medan content fortsätter nedanför.
Hur ska man tänka? Funkar det inte att använda positionering på det här sättet?
Det är klart att det går att lösa på andra sätt, men jag ville ju gärna förstå det här också. ;)
(Jag har inte orkat trixa så att exemplet funkar i IE)
zcorpanMedlem sedan dec. 20042 269 inlägg
Det enda som "behöver" absolut positionering i ditt exempel är menyn. Om du låter #content och #footer vara statiska så blir det nog ungefär som du vill ha det, skulle jag tro. Sätt margin-left på #content för att ge plats åt menyn bara. :)
hypatiaMedlem sedan feb. 20011 325 inlägg
Okej!
Något sådant här alltså: http://member.webforum.nu/1547/positionering2.html
Men, går det inte alls att lösa enligt mitt första exempel och i så fall varför? Jag vill ju gärna förstå hur positionering funkar... :)
zcorpanMedlem sedan dec. 20042 269 inlägg
När du positionerar ett element absolut tas det ut ur dokumentflödet, så det går inte att få #footer under #content om du inte vet vilken höjd #content har. Dessutom kan du inte få din #container att sträcka sig ner till din #footer eftersom du inte vet höjden...
När ett element inte är positionerat ligger det kvar i dokumentflödet, så din #container sträcker sig så långt som dess innehåll behöver. Om din #content och #footer är kortare än #meny så kommer #meny att hamna utanför din #container, av samma anledning som tidigare.
Här har du en sandlåda:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position:absolute</title>
<style type="text/css">
html, body { height:100%; margin:0; padding:0; }
div { border:solid; width:50%; height:50%; }
#foo { position:relative; }
#bar { position:absolute; right:1em; bottom:1em; }
#baz { position:absolute; left:1em; top:1em; }
.before { background:yellow; color:black; }
.after { background:lime; color:black; }
</style>
</head>
<body>
<div id="foo">
<span class="before">foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo</span>
<div id="bar">
<span class="before">bar</span>
<div id="baz">
baz
</div>
<span class="after">bar</span>
</div>
<span class="after">foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo</span>
</div>
</body>
</html>
:)
hypatiaMedlem sedan feb. 20011 325 inlägg
Gräjt! Den där sandlådan rätade ut en hel del frågetecken för mig.
TACK så mycket! :D
