CSS Layer positionierung
flo
- css
Hallo zusammen!
Ich habe folgendes Problem:
code:
<css>
.container {position:absolut; top:200px; left:150px; width:900px; height:400px;}
.kasten1 {position:relative; top:20px; left:20px; width;50px; height:50px}
.kasten2 {position:relative; top:50px; left:120px; width;50px; height:50px}
.kasten3 {position:relative; top:20px; left:500px; width;50px; height:50px}
</css>
<body>
<div class="container">
<div class="kasten1">
text1
</div>
<div class="kasten2">
text2
</div>
<div class="kasten3">
text3
</div>
</div>
</body>
Ich möchte, dass die position der divs kasten1-kasten3 immer vom div container ausgehen!
jetzt werden der kasten-div von "left:XXpx" korrekt angezeigt!
die positionierung "top:YYpx" wird aber nicht bei jedem kasten von dem oberen rand her gemessen. obwohl kasten3 "top:20px" hat, wird er unterhalb von kasten2 angezeigt!?
Hi
wenn ich dein problem richtig verstehe, hast du den unterschied zwischen relativer und absoluter positionierung nicht ganz verstanden. :)
"absolute" positioniert ein element zum nächsten absolute positionierten elternelement (bzw. dessen ecke links oben).
"relative" positioniert ein element zu der position an der es eigentlich erscheinen würde wenn es nicht positioniert werden würde.
so long
Ole
(8-)>
hi,
"absolute" positioniert ein element zum nächsten absolute positionierten elternelement (bzw. dessen ecke links oben).
nicht ganz.
absolute positionierung nimmt bezug auf das nächsthöhere _vorfahren_element, dessen position-angabe _vom default static abweicht_;
und beim fehlen eines solchen auf den viewport.
gruß,
wahsaga
Hi,
<css>
Das Element gibt es nicht in HTML.
.container {position:absolut; top:200px; left:150px; width:900px; height:400px;}
absolut ist kein gültiger Wert.
.kasten1 {position:relative; top:20px; left:20px; width;50px; height:50px}
Bei width fehlt der Wert, 50px ist keine CSS-Eigenschaft, und wenn, würde der Wert fehlen.
.kasten2 {position:relative; top:50px; left:120px; width;50px; height:50px}
.kasten3 {position:relative; top:20px; left:500px; width;50px; height:50px}
siehe .kasten1
Ich möchte, dass die position der divs kasten1-kasten3 immer vom div container ausgehen!
Warum benutzt Du dann position:relative? Da muß schon absolute her.
container muß dann natürlich auch (anders als bisher) eine von static abweichende Positionierung haben.
die positionierung "top:YYpx" wird aber nicht bei jedem kasten von dem oberen rand her gemessen. obwohl kasten3 "top:20px" hat, wird er unterhalb von kasten2 angezeigt!?
Das ist die logische Folge von position:relative.
cu,
Andreas