nicht angemeldet
position:absolute - Ausgangspunkt
Hallo Forumsteilnehmer!
Eine grundlegende Verständnisfrage:
Laut http://de.selfhtml.org/navigation/css.htm#positionierung
(entsprechend: http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme)
wird bei Positionierungen über "position:absolute" die Position des umgebenden Elternelements als Ausgangspunkt genommen.
Warum funktioniert das z.B. bei folgendem Beispiel nicht?
<html>
<body style="padding: 0; margin: 0">
<div style="height: 100px;">
</div>
<div style="height: 200px; border: solid 3px green;">
<!-- beginnt vertikal bei 101px -->
<div style="position: absolute; left: 0px; top: 0px; border: solid 3px red;">
<!-- ist Kindelement des vorherigen div-Tags -->
Dieser rot umrahmte Block müßte nach meinem Verständnis <br />
links oben im grün umrahmten Block stehen. <br />
Warum tut er das z.B weder im IE 6.0 noch im Firefox? <br />
(Habe grad keinen anderen Testbrowser zur Hand.)
</div>
</div>
</body>
</html>
Kann mir jemand helfen? Was verstehe ich falsch?
PeterB
-
Hallo,
Laut http://de.selfhtml.org/navigation/css.htm#positionierung
(entsprechend: http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme)
wird bei Positionierungen über "position:absolute" die Position des umgebenden Elternelements als Ausgangspunkt genommen.Als Ausgangspunkt bei absoluter Positionierung wird das erste Elternelement
genommen, dessen Position von static abweicht, wenn es ein solches nicht
gibt, der Viewport. In deinem Fall würde ich einfach position: relative
für das Elternelement des zu positionierenden Elements nehmen.Gruß
Alexander Brock--
SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com -
hi,
Laut http://de.selfhtml.org/navigation/css.htm#positionierung
(entsprechend: http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme)
wird bei Positionierungen über "position:absolute" die Position des umgebenden Elternelements als Ausgangspunkt genommen.selfhtml ist an der stelle fehlerhaft.
es wird das jenige parent-element als bezugspunkt genommen, dessen position-angabe vom default-wert static abweicht. wenn kein solches vorhanden ist, _dann_ wird am viewport ausgerichtet.man _kann_ es evtl. aus dem beispiel herauslesen, aber selfhtml sagt es nicht so explizit, bzw. die pauschale aussage ist an der stelle definitiv falsch.
Warum funktioniert das z.B. bei folgendem Beispiel nicht?
weil dein container eben keine von static abweichende positionierung hat.
<div style="height: 200px; border: solid 3px green;">
ersetze das durch
<div style="height: 200px; border: solid 3px green; position:relative;">
dann sollte es "funktionieren".
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo Alexander, hallo wahsaga!
selfhtml ist an der stelle fehlerhaft.
es wird das jenige parent-element als bezugspunkt genommen, dessen position-angabe vom default-wert static abweicht. wenn kein solches vorhanden ist, _dann_ wird am viewport ausgerichtet.dann ist also die entsprechende Formulierung bei
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
zumindest auch lückenhaft...
Oder gibt es da noch irgendwo eine gültige nähere Festlegung?
Auf jeden Fall erstmal vielen Dank Euch beiden!
(mit dem "position:relative" für den umgebenden Container klappts!)PeterB
-
Hallo,
dann ist also die entsprechende Formulierung bei
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
zumindest auch lückenhaft...Nein. Es fehlt nur ein Link zur Definition von "containing block".
http://www.w3.org/TR/CSS21/visudet.html#containing-block-detailsviele Grüße
Axel
PS: Die W3C-Dokus sind, meiner Meinung nach, häufig sehr oberflächlich verlinkt. Für ein Consortium, welches sich mit der Definition von Web-Standards beschäftigt, ist das keine besonders gute Eigenwerbung.
-
Hallo Axel,
Nein. Es fehlt nur ein Link zur Definition von "containing block".
http://www.w3.org/TR/CSS21/visudet.html#containing-block-detailsTatsache. Da stehts wortwörtlich:
"If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ..."
Der Link zur Erläuterung von "containing block", der bei http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme angegeben ist, und zu Abschnitt 9.3 führt, hat mich davon abgebracht, nochmal im Index nachzusehen - was man halt doch immer tun sollte... Und sieheda - da ist dann Dein Link [zu Abschnitt 10.1] auch als erster angegeben. (Bei der Gelegenheit merk ich, dass ich viel zu selten in dieses Dokument guck.)
Gruß und Danke,
Peter
-
-
-