nicht angemeldet
Probleme mit z-index und position: relative
MudGuardHallo css-Experten:
Ist z-index in Verbindung mit einem Gemisch aus position: absolute und position: relative erlaubt?
Folgendes Problem:
In einem recht komplexem Layout (Beispielscode stark verkürzt) soll ein Container "outOfTheBox" über dem main-Container stehen. Da dessen z-index höher ist, erwarte ich eigentlich, dass dieser das auch tut. Statt dessen liegt aber der main-Container vorne (Mozilla 1.0.7, Safari 1.3, IE5.5, IE6). Wenn ich im main-Container die position herausnehme (was ich leider wegen hier nicht ersichtlicher Abhängigkeiten nicht kann), geht es lustigerweise, obwohl dann main nicht positioniert ist.
Kann mir jemand das Verhalten erklären?
Kann mir jemand helfen, outOfTheBox über main zu lagern, ohne an der Positionierung von main zu basteln?
Vielen Dank für alle Hilfe, die da kommen mag,
Gruß Andree
Der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<style type="text/css">
~~~~~~css
* {
margin: 0;
padding: 0
}
#subNavi li {
background: #F99;
position: relative; /* for outOftheBox */
z-index: 10;
}
#outOfTheBox {
background: #987;
font-size: 300%;
left: 5em;
position: absolute;
top: 0;
z-index: 100;
}
#main {
background: #3C3;
position: relative; /* for outOftheBox */
z-index: 20;
}
~~~~~~html
</style>
</head>
<body>
<ul id="subNavi">
<li>
subNavi.li
<div id="outOfTheBox">outOftheBox</div>
</li>
</ul>
<div id="main">main</div>
</body>
</html>
-
Nachtrag:
Der zweite /* for outOftheBox */-Kommentar ist Blödsinn.
Gruß Andree
-
Hallo,
warum ist das div in dem li?
Gruß, Frankx
-
Hallo Frankx,
»» warum ist das div in dem li?
in einer Navigationsliste, die im Original aus floatenden li-s besteht, wird das aktuelle Navigationselement mit diesem div ausgestattet. Dieses sorgt dafür, optisch außerhalb des ul-Containers das aktuelle li optisch zu dekorieren.
Nur wenn das outOfTheBox-div innerhalb des li liegt, hat es die gleiche x-Position wie dieses. Das funktioniert in dem Beispiel natürlich nicht, weil es stark gekürzt und auf des z-index-Problem reduziert ist.
Gruß Andree
-
Lieber Andree,
warum ist das div in dem li?
ginge da nicht ein SPAN?
Ich lese in Deinem Ruleset für
#outOfTheBoxkeindisplay:block. Könnte das etwas damit zu tun haben?Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
»» ginge da nicht ein SPAN?
da ginge auch ein span, dem ich dann allerdings eindisplay:blockgeben müsste.»» Ich lese in Deinem Ruleset für
#outOfTheBoxkeindisplay:block. Könnte das etwas damit zu tun haben?Ein
<div>hat diese Eigenschaft ja als Default. Es ändert sich aber auch nichts, wenn ich dem div eindisplay:blockspendiere oder durch ein<span>mit gleicher Eigenschaft eintausche.Gruß
Andree-
Hallo.
Man beachte, dass in Andrees Posting die Kommentarzeichen nicht zu Kommentarelementen geparst werden.
Dies tritt hier in letzter Zeit vermehrt auf.
Woran liegt es?Originalzeichen
Selbst eingefügt
Daran also offenbar nicht...
Einen schönen Freitag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
Hallo.
<del>Kommentar</del><ins>Zitat</ins>Einen schönen Freitag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
你好 Ashura,
Man beachte, dass in Andrees Posting die Kommentarzeichen nicht zu
Kommentarelementen geparst werden.Dies tritt hier in letzter Zeit vermehrt auf.
Woran liegt es?Ein gewisser Jemand hat gestern an der Konfiguration gewurschtelt und sie
dann nicht mehr UTF-8-kodiert gespeichert. Deshalb stimmte das, was
gesendet wurde und das, was erwartet wurde nicht mehr überein.再见,
克里斯蒂安--
Fantastisch: Caramel-Latte-Machiato | Buchpreisbindung?
Wenn du gehst, gehe. Wenn du sitzt, sitze. Und vor allem: schwanke nicht!
http://wwwtech.de/
-
Hallo Christian.
Ein gewisser Jemand hat gestern an der Konfiguration gewurschtelt und sie
dann nicht mehr UTF-8-kodiert gespeichert. Deshalb stimmte das, was
gesendet wurde und das, was erwartet wurde nicht mehr überein.Ah gut. Das kann ich nachvollziehen.
Aber bin ich der Einzige, der diese so sieht, oder hat sich sonst niemand gemeldet? (Jaja, Bugtracker...)Einen schönen Freitag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
Hi,
Aber bin ich der Einzige, der diese so sieht, oder hat sich sonst niemand gemeldet? (Jaja, Bugtracker...)
Ich wollt das auch grad melden, hab dann aber noch diesen Thread-Ast gesehen ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
-
-
-
Hallo,
»»
»» Ist z-index in Verbindung mit einem Gemisch aus position: absolute und position: relative erlaubt?
Ja, aber ... ;-))
»»
»» In einem recht komplexem Layout (Beispielscode stark verkürzt) soll ein Container "outOfTheBox" über dem main-Container stehen. Da dessen z-index höher ist, erwarte ich eigentlich, dass dieser das auch tut. Statt dessen liegt aber der main-Container vorne (Mozilla 1.0.7, Safari 1.3, IE5.5, IE6). Wenn ich im main-Container die position herausnehme (was ich leider wegen hier nicht ersichtlicher Abhängigkeiten nicht kann), geht es lustigerweise, obwohl dann main nicht positioniert ist.
»»
»» Kann mir jemand das Verhalten erklären?
Die Eigenschaft position schafft unterschiedliche Ausgangssituationen für den z-index. Zwischen Elementen mit position:static ist der z-index wirkungslos. Zwischen Elementen mit position:relative liegt das Element mit dem höchsten z-index vorn, wenn sich diese Elemente überlappen. Elemente mit position:absolute sind _in_ Elementen mit position!=static an diesen Elementen orientiert. Das gilt auch für den z-index.»» Kann mir jemand helfen, outOfTheBox über main zu lagern, ohne an der Positionierung von main zu basteln?
»»
Lösche alle z-index Angaben, bis auf:
»» #subNavi li {
»» background: #F99;
»» position: relative; /* for outOftheBox */
z-index: 1;
»» }viele Grüße
Axel
-
Hallo Axel,
»» Ja, aber ... ;-))
meine Lieblingsantwort bezüglich css ;-)
»» Die Eigenschaft position schafft unterschiedliche Ausgangssituationen für den z-index. Zwischen Elementen mit position:static ist der z-index wirkungslos. Zwischen Elementen mit position:relative liegt das Element mit dem höchsten z-index vorn, wenn sich diese Elemente überlappen. Elemente mit position:absolute sind _in_ Elementen mit position!=static an diesen Elementen orientiert. Das gilt auch für den z-index.
habe ich das richtig verstanden, dass es also nicht einen gemeinsamen z-index für _alle_ Elemente gibt, sondern dieser - zumindest bei position:absolute - sich immer nur auf das nächsthöhere positionierte Element bezieht?
»» Lösche alle z-index Angaben, bis auf:
»» »» #subNavi li {
»» »» background: #F99;
»» »» position: relative; /* for outOftheBox */
»» z-index: 1;
»» »» }Sehr spannend - das geht, auch wenn mir momentan noch nicht hundertprozentig klar ist, wo mein Denkfehler liegt. Aber das kommt wohl mit der Zeit ...
Vielen Dank und Gruß
Andree-
Hallo,
»»
»» habe ich das richtig verstanden, dass es also nicht einen gemeinsamen z-index für _alle_ Elemente gibt,
richtig»» sondern dieser - zumindest bei position:absolute - sich immer nur auf das nächsthöhere positionierte Element bezieht?
Hm, ich würde es anders formulieren. Elemente mit position:absolute orientieren sich in der Position und im z-index am nächsten sie umgebenden Element, dessen Position nicht static ist. Gibt es ein solches Element nicht, ist ihr Bezugselement der Viewport (das Browserfenster).viele Grüße
Axel
-
Hallo Andree,
habe ich das richtig verstanden, dass es also nicht einen gemeinsamen z-index für _alle_ Elemente gibt,
Ja.
sondern dieser - zumindest bei position:absolute - sich immer nur auf das nächsthöhere positionierte Element bezieht?
Ja, aber … :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>z-index</title> </head><body> <div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;"> <b>A:2</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"> </div> <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;"> <b>B:1</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"> </div> <div style="position:absolute; top:190px; left:270px; width:300px; height:280px; z-index:3; border:1px solid #888; background:#eee;"> <b>C:3</var></b> <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;"> <b>D:2</var></b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"> </div> <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;"> <b>E:3</var></b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"> </div> <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;"> <b>F:-1</var></b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"> </div> </div> </body> </html>→ Beispiel plus Erläuterung aus SELFHTML 8.1.1:
Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.
Beachten Sie:
Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die voraussichtliche Spezifikation gemäß CSS2.1 umsetzen.
Siehe auch CSS2.1 z-index
Grüße
Roland
-
-