• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit z-index und Firefox 2

  • Ersteller Ersteller Efchen
  • Erstellt am Erstellt am
E

Efchen

Guest
Moin,

ich hab jetzt ne Weile gegrübelt und mittlerweile auch selbst die Lösung gefunden ;-)

Aber vielleicht interessiert es ja irgendjemanden, dass Firefox 2 einen Bug im Zusammenhang mit negativen z-index hat.

Die Bestätigung steht hier: CSS Z-Index Can’t Have Negative Values In Firefox » Slicksurface - Tech, Design & SEO Blog

So sieht ein Beispielcode von mir aus, mit dem man das nachvollziehen kann:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Problem mit z-index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	background:url(bg_oben.jpg) white repeat-x;
	font-family:sans-serif;
	font-size:100.01%;
}
* {
	margin:0;
	padding:0;
}
h1 {
	margin-bottom:1em;
}
div {
	border:1px solid black;
	padding:0.5em 1em;
}
div#eins {
	background-color:#ffff00;
	width:8em;
	margin:5em 0 0 3em;
}
div#eins ul {
	list-style-type:none;
}
div#eins ul li {
	margin-bottom:1em;
}
div#zwei {
	background-color:#f778a1;
	position:absolute;
	top:140px;
	left:1em;
	padding-left:14em;
	z-index:-1;
}
</style>
</head>

<body>

  <div id="eins">
    <h1>Eins</h1>
    <ul>
      <li>Punkt 1</li>
      <li>Punkt 2</li>
      <li>Punkt 3</li>
    </ul>
  </div>
  <div id="zwei">
    <h1>Zwei</h1>
    <p>
      Inhalt Inhalt Inhalt
      Inhalt Inhalt Inhalt
      Inhalt Inhalt Inhalt
    </p>
  </div>

</body>
</html>

Falls aber wider Erwarten jemand eine Idee hat, das zu umgehen, und zwar möglichst, ohne am HTML was ändern zu müssen und ohne die Liste (hier in div#eins) auch absolut zu positionieren. Dies Beispiel ist extrahiert aus einer Bugzilla-Seite mit eigenem Skin und wer schon mal Bugzilla-Code gesehen hat, der weiß, dass die es nicht sonderlich mit Semantik haben. Außerdem würde eine Änderung am HTML-Code sich auch auf andere Skins auswirken.

Grüße,
-Efchen
 
Moinsen..

keine Ahnung ob *DAS* so "sinnvoll" ist, was ich dahingefuscht habe...aber spontane einfälle sind meist die besten und es klappt genauso..vorallem auch in jedem Browser...

Habe die absolute positionierung und den z-index beim div mit der id "zwei" entfernt und das div mit der id "eins" relativ positioniert. Sieht zumindest, nach anpassen von margin-top, margin-left (div zwei) sowie top und left (div eins), genauso (bis auf ein paar pixel ^^"") aus.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Problem mit z-index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
    background:url(bg_oben.jpg) white repeat-x;
    font-family:sans-serif;
    font-size:100.01%;
}
* {
    margin:0;
    padding:0;
}
h1 {
    margin-bottom:1em;
}
div {
    border:1px solid black;
    padding:0.5em 1em;
}
div#eins {
    background-color:#ffff00;
    width:8em;
    position: relative;
    top: 5em;
    left: 3em;

}
div#eins ul {
    list-style-type:none;
}
div#eins ul li {
    margin-bottom:1em;
}
div#zwei {
    background-color:#f778a1;
    padding-left:14em;
    width: 22em;
    margin: -3em 0em 0em 1em;
}
</style>
</head>

<body>

  <div id="eins">
    <h1>Eins</h1>
    <ul>
      <li>Punkt 1</li>
      <li>Punkt 2</li>
      <li>Punkt 3</li>
    </ul>
  </div>
  <div id="zwei">
    <h1>Zwei</h1>
    <p>
      Inhalt Inhalt Inhalt
      Inhalt Inhalt Inhalt
      Inhalt Inhalt Inhalt
    </p>
  </div>
</body>
</html>
Grüßli
Loon3y
 
Loon3y schrieb:
Habe die absolute positionierung und den z-index beim div mit der id "zwei" entfernt und das div mit der id "eins" relativ positioniert.

Also nur umgekehrt, damit man einen positiven z-index bekommt. Gute Idee, leider mit meinem Bugzilla-Code nicht realisierbar, das wäre zu einfach ;-)

Aber danke fürs Mitgefühl :-D
Zum Vergrößern anklicken....
 
Die absolute Positionierung kann div#zwei ja behalten.
Nur der negative z-index müßte weg:
Code: 
div#eins {
...
position: relative;
z-index: 10;
}
div#zwei {
...
position:absolute;
top:140px;
left:1em;
...
}
z-index: 1; würde natürlich auch reichen.
Manchmal vergebe ich z-index in Zehnerschritten. So kann ich später noch Ebenen zwischenschieben ohne in negative Werte zu geraten.
 
Zuletzt bearbeitet:
Ja, aber wenn ich das absolut positionierte div#zwei mit einem positiven z-index versehe, dann liegt es ja VOR dem nicht mit "position" positioniertem div#eins. Und es soll ja dahinter liegen. Elemente ohne position und ohne z-index haben einen z-index von 0.
 
#zwei braucht in deinem Beispiel kein z-index.

Wenn es einen anderen Grund für z-index in #zwei gibt kannst du jeden Wert von 0-9 verwenden.
Solange der z-index von #eins größer wie der von #zwei ist wird #eins über #zwei gelegt.
 
Eben. Und da #eins automatisch einen z-index von 0 bekommt (weil es nicht absolut positioniert ist), muss ich #zwei einen negativen z-index geben, um es unter #eins zu bekommen. Weil - wie Du richtig sagst - der z-index von #eins größer sein muss, als der von #zwei. :-)
 
was ist nicht verstehe, wieso meine lösung nicht korrekt ist mit position:relative bei #eins ?! Immerhin kommt doch genau das ra us, was gewünscht war, ohne z-index und es funktioniert in allen browsern. (soweit ichs testen konnt: safarie, mozilla, ie7, opera, lynx (haha :P) )
 
Dein Vorschlag geht natürlich auch.

Aber:
Code: 
div#eins {
    background-color:#ffff00;
    width:8em;
    position: relative;
    top: 5em;
    left: 3em;
}
So werden alle nachkommenden Elemente auserhalb von div#eins verschoben.
Das kann einen langen Rattenschwans von weiteren Positionierungen zur Folge haben.

Es kann auch das erwünschte Verhalten sein.
In Efchens Beispiel ist div#zwei aber völlig unabhängig von den umliegenden Elementen positioniert.
Das geht nur mit position: absolute;
 
Zuletzt bearbeitet:
neuroleptika schrieb:
du kannst für alle Positionswerte außer static einen z-index bestimmen.
Zum Vergrößern anklicken....

Und #eins ist static.
#eins ist im Original ein Menü.
#zwei eine Überschrift, die absolut positioniert ist, links einen Abstand haben soll (wegen des Menüs) und rechts bis an den Browserrand gehen soll. position:absolute benötigt demnach einen Wert für "width", aber "100%-250px" ist bekanntlich nicht möglich. Also width:100%. Den Text kann man mit einem Abstand einrücken, aber #zwei überlappt mit einem positiven z-index einzelne Menüpunkte, so dass diese nicht mehr angeklickt werden können, daher ist ein negativer z-index nötig.

Ich weiß, mit einem Link oder Quellcode wäre es einfacher, aber ich kann die Site nicht online stellen, ich kann auch nicht den Quellcode rauskopieren, weil ich nicht weiß, was davon relevant ist. Und wenn man ein Layout/Design festlegen muss, möglichst ohne den HTML-Code zu ändern, damit sich andere Skins nicht verändern, dann ist das etwas schwieriger, als wenn man eine Seite selber entwickelt. Dann würde das Menü bei mir floaten und alles wäre astrein. Aber dem ist halt leider nicht so...

Danke trotzdem für Deine sicher richtigen und lehrreichen Beiträge. :-)

Und, Loon3y, wenn ich #eins im Original relativ positioniere, dann steht es ganz woanders als da wo es hin soll. Ist nicht so einfach mit diesem Krampfzilla :-)
 
Efchen schrieb:
Und, Loon3y, wenn ich #eins im Original relativ positioniere, dann steht es ganz woanders als da wo es hin soll. Ist nicht so einfach mit diesem Krampfzilla :-)
Zum Vergrößern anklicken....

Bestände die Möglichkeit, dass du mal einen screen machst, damit ich wenigstens sehe wie das dir alles verpfuscht mit position: relative; ?

Wieso muss eigentlich das #zwei hinter dem #eins sein, also von der größe her? Wenn es rechts neben dem #eins wäre, müsste man nichts über dem anderen legen usw...Und wegen den 5px links von #eins was zu sehen ist...ist das so wichtig?! Sieht zwar sehr gut aus..aber naja, Geschmackssache :-)

Gruß
Loon3y
 
Isch find dasch ja luschtig...

Ich hab gedacht, ich hätte das ausprobiert, aber anscheinend doch nicht. Nur ein position:relative und schon schwebt das Menü (#eins) über meiner Überschrift (#zwei) und ich kann den z-index rausnehmen.

Danke für Eure Beharrlichkeit, so hat sich doch noch alles zum Guten gewandt :-)
 
Efchen schrieb:
Isch find dasch ja luschtig...

Ich hab gedacht, ich hätte das ausprobiert, aber anscheinend doch nicht. Nur ein position:relative und schon schwebt das Menü (#eins) über meiner Überschrift (#zwei) und ich kann den z-index rausnehmen.

Danke für Eure Beharrlichkeit, so hat sich doch noch alles zum Guten gewandt :-)
Zum Vergrößern anklicken....

muahahahahaha ;P Da muss ich selber drüber schmunzeln :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben