nicht angemeldet
relativer Text verdeckt absoluten Text
0 0 0 IE6 tut's nicht... (Workaround?)
relativer Text verdeckt absoluten Text
Hallo!
Bei folgendem Code ist mir etwas aufgefallen: Im IE6 und in NS7.0 ist der Text, der aufpoppt, wenn man über den ersten Link fährt nicht vollständig im Vordergrund: Er wird von der zweiten, relativ positionierten Zeile überdeckt. Nicht aber von der dritten Zeile, die nicht relativ positioniert ist.
Bei dem ersten und dem zweiten Link fällt aber auf, dass offenbar nur Bereiche aus "fremden" relativ positionierten Textstücken nicht überdeckt werden. Innerhalb des eigenen relativ positionierten Elements überdeckt die aufpoppende Box den Text.
Warum ist das so und kann ich auch mit der Box fremden relativen Text überdecken?
Tom-misch
<html>
<head>
<style type="text/css">
<!--
a span {display:none; position:absolute; top:2px; left:10px;}
a:hover span {display:block; width:300px; background:#f0f0f0;}
a:hover {border:none;}
-->
//</style>
</head>
<body><br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
<span style="position:relative; background:#ff0000"> text texttext texttext texttext texttext texttext text
<a href="xxx">Link mit teilweise überdeckter Box
<span>hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="position:relative; background:#ff0000"> text texttext texttext texttext texttext texttext text
<a href="xxx">Kein relativer Text zum überdecken???
<span>hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="background:#00ff00">Kein relativer Text!!!
</span>
</body>
</html>
-
Hi,
Warum ist das so
weil es einen Stacking Context gibt.
und kann ich auch mit der Box fremden relativen Text überdecken?
Es geht nicht um "fremd" oder absolut/relativ, sondern darum, was weiter vorne liegt. Beeinflussbar ist dies - bei positionierten Elementen - mittels der z-index-Eigenschaft.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
habe das mal mit z-index probiert. Siehe unten. Klappt auch im NS7. Aber nicht im IE6. Liegt das an mir oder am IE6?
Für den zweiten Fall: Und da ich ja die auch eine schöne Darstellung für die IE-Freunde bereitstellen möchte. Gibt's da einen Workaround?
Tom-misch
<span style="position:relative; background:#ff0000"> text texttext texttext texttext texttext texttext text
<a href="xxx">Link mit teilweise überdeckter Box
<span style="z-index:2;">hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="position:relative; background:#ff0000; z-index:1;"> text texttext texttext texttext texttext texttext text
<a href="xxx">Kein relativer Text zum überdecken???
<span>hidden<br>text<br>hidden<br>text</span>
</a>
</span>-
Hi Cheatah,
habe das mal mit z-index probiert. Siehe unten. Klappt auch im NS7. Aber nicht im IE6. Liegt das an mir oder am IE6?
Habe es auch gerade noch mal in Opera 7.23 angeschaut. Da tut's auch. Irgendeiner eine Idee für den IE? (Zur Einfachheit unten noch einmal der gesamte Code.)
Für den zweiten Fall: Und da ich ja die auch eine schöne Darstellung für die IE-Freunde bereitstellen möchte. Gibt's da einen Workaround?
<html>
<head>
<style type="text/css">
<!--
a span {display:none; position:absolute; top:2px; left:10px;}
a:hover span {display:block; width:300px; background:#f0f0f0;}
a:hover {border:none;}
-->
//</style></head>
<body><br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
<span style="position:relative; background:#ff0000"> text texttext texttext texttext texttext texttext text
<a href="xxx">Link mit teilweise überdeckter Box
<span style="z-index:2;">hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="position:relative; background:#ff0000; z-index:1;"> text texttext texttext texttext texttext texttext text
<a href="xxx">Kein relativer Text zum überdecken???
<span>hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="background:#00ff00">Kein relativer Text!!!
</span>
</body>
</html>-
Hi,
habe das mal mit z-index probiert. Siehe unten. Klappt auch im NS7. Aber nicht im IE6. Liegt das an mir oder am IE6?
offenbar am IE - ein Bug, den ich noch nicht kannte, der aber (leider im Gegensatz zu einer Lösung) oft im Netz gefunden werden kann.
Irgendeiner eine Idee für den IE?
Ich habe ein wenig gespielt, leider ohne Erfolg. Das beste, was ich Dir anbieten kann ist, dass der relativ positionierte Bereich sicht- aber nicht nutzbar ist, indem man ihm einen negativen z-index gibt ;-) Sorry.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
Ich habe ein wenig gespielt, leider ohne Erfolg. Das beste, was ich Dir anbieten kann ist, dass der relativ positionierte Bereich sicht- aber nicht nutzbar ist, indem man ihm einen negativen z-index gibt ;-) Sorry.
Tja, das funktioniert dann im IE. Er zeigt noch das relative Element mit z-index=-1 an und überdeckt es auch nicht mit dem absoluten Popup. Aber der NS tut's halt wieder richtig und zeigt das relative Element mit z-index=-1 gar nicht an. Vermute mal, das meintest Du mit "nicht nutzbar". Einheitliche Lösung wohl nicht in Sicht.
Trotzdem Danke!
-
Hi,
Vermute mal, das meintest Du mit "nicht nutzbar".
damit meinte ich auch, dass Du im IE mal über den zweiten Link gehen sollst :-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Vermute mal, das meintest Du mit "nicht nutzbar".
damit meinte ich auch, dass Du im IE mal über den zweiten Link gehen sollst :-)
Aber eigenet sich doch schön, um den z-index zu erklären:)
Apropos: Ich vermute mal der NS hat recht, wenn er einen negativen z-index nicht anzeigt. Darf man eigentlich einen negativen z-index angeben?
Cheatah
-
Hi,
Aber eigenet sich doch schön, um den z-index zu erklären:)
*g*
Apropos: Ich vermute mal der NS hat recht, wenn er einen negativen z-index nicht anzeigt. Darf man eigentlich einen negativen z-index angeben?
Man darf. Ich bin jedoch nicht hundertprozentig sicher, ob die Interpretation Mozillas a) richtig und b) die einzig richtige ist. http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index habe ich noch nicht vollständig assimiliert.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
hmm, ich trau mich das ja gar nicht richtig zu sagen, aber bei dem unten stehenden Code (unteres relatives Element hat negativen z-index) scheint der IE richtig zu liegen: Der grüne untere Text hat einen automatischen z-index von 0, also ist er höher als das Popup des zweiten Links. Und NS sollte schon negative z-indizes anzeigen. (Beim NS ist die zweite rote Zeile weg.) Naja, dafür macht er ja sonst fast alles schön brav.
Tom-misch
<html>
<head>
<style type="text/css">
<!--
a span {display:none; position:absolute; top:2px; left:10px;}
a:hover span {display:block; width:300px; background:#f0f0f0;}
a:hover {border:none;}
-->
//</style></head>
<body style="z-index:-2;"><br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
<span>
<span style="position:relative; background:#ff0000;"> text texttext texttext texttext texttext texttext text
<a href="xxx">Link mit teilweise überdeckter Box
<span style="z-index:2;">hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="position:relative; background:#ff0000; z-index:-1;"> text texttext texttext texttext texttext texttext text
<a href="xxx">Kein relativer Text zum überdecken???
<span>hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="background:#00ff00">Kein relativer Text!!!
</span>
</body>
</html>-
Hi,
hmm, ich trau mich das ja gar nicht richtig zu sagen, aber bei dem unten stehenden Code [...] scheint der IE richtig zu liegen:
wie gesagt, ich kann Dir das leider nicht definitiv beantworten. Grundsätzlich gehe ich, wenn Mozilla sich anders verhält als ich es gedacht hätte, davon aus, dass der Irrtum bei mir liegt - aber Ausnahmen existieren natürlich (z.B. die Berechnung von top:auto bei Tabellen, gut testbar mit <table style="position:absolute; bottom:0px;">). Der Fall, dass der IE etwas richtig macht, was Mozilla fehlerhaft implementiert hat, wäre aber irgendwie schon 'ne Pressemeldung wert ;-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
...Workaround gefunden, dass es auch in NS klappt. Sh. unten (Angaben bei Body beachten. Der Workaround ist vom zweiten Link.) Klappt so zwar, ist mir aber glaube ich zu hässlich. Immerhin liegt jetzt ein -1 Element über einem mit z-index=0 (body hat 0).
Scheint ein bekannter Bug zu sein.
http://bugzilla.mozilla.org/show_bug.cgi?id=78087
http://archivist.incutio.com/viewlist/css-discuss/5061Tom-misch
<html>
<head>
<style type="text/css">
<!--
a span {display:none; position:absolute; top:2px; left:10px;}
a:hover span {display:block; width:300px; background:#f0f0f0;}
a:hover {border:none;}
-->
//</style></head>
<body style="position:absolute; left:0px; top:0px; z-index:0"><br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
<span>
<span style="position:relative; background:#ff0000;"> text texttext texttext texttext texttext texttext text
<a href="xxx">Link mit teilweise überdeckter Box
<span style="z-index:2;">hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="position:relative; background:#ff0000; z-index:-1;"> text texttext texttext texttext texttext texttext text
<a href="xxx">Kein relativer Text zum überdecken???
<span>hidden<br>text<br>hidden<br>text</span>
</a>
</span>
<br>
<span style="background:#00ff00">Kein relativer Text!!!
</span>
</body>
</html>
-
-
-
Hi,
Apropos: Ich vermute mal der NS hat recht, wenn er einen negativen z-index nicht anzeigt. Darf man eigentlich einen negativen z-index angeben?
Man darf. Ich bin jedoch nicht hundertprozentig sicher, ob die Interpretation Mozillas a) richtig und b) die einzig richtige ist. http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index habe ich noch nicht vollständig assimiliert.Die Frage ist dabei unter anderem, wie transparent die Elemente mit z-index 0 (z.B. body und html) sind ...
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
-
-
-