Absolut positionering

4 svar · 270 visningar · startad av hypatia 28 aug. 2005

hypatiaMedlem sedan feb. 20016 388 inlägg

Frågan28 aug. 2005 08:12#1

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 245 inlägg

28 aug. 2005 09:57#2

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. 20016 388 inlägg

28 aug. 2005 10:18#3

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 245 inlägg

28 aug. 2005 11:09#4

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. 20016 388 inlägg

28 aug. 2005 13:04#5

Gräjt! Den där sandlådan rätade ut en hel del frågetecken för mig.

TACK så mycket! :D