Schicht-Problem mit z-index

[Tobias S.]

Hallo zusammen!

Während z-index in CSS 2.0 noch dokumentweit gültig war (z-index:2 lag immer vor z-index:1, egal wo das jeweilige Element im HTML-Dokument notiert war), wurde der Gültigkeitsbereich einer z-index-Angabe in CSS 2.1 auf alle HTML-Elemente mit identischem Elternknoten beschränkt (falls ich das richtig verstanden habe).

Nun habe ich das Problem, dass ich im Header meiner Website ein Dropdown-Menü habe, dessen Untermenüanzeige beim Aufklappen immer sichtbar - also auf oberster Ebene - sein soll. Nun gibt es im Content der Website allerdings ein Element nahe des Hauptmenüs, das - genau wie die Untermenüanzeige des Menüs - mit position:absolute positioniert wurde. Durch die Positionierung wurde dem Element damit automatisch ein Wert für z-index zugewiesen.

Durch die Tatsache, dass die Untermenüanzeige im HTML-Code vor der Definition des Content-Elements steht, ist es für mich unmöglich das Content-Element im Hintergrund zu halten. Durch die nicht kontrollierbare Position im Code besteht keine Möglichkeit, die Untermenüanzeige mit z-index vor das Content-Element zu bekommen.

Wer weiß Rat?

Viele Grüße,
Tobias

[Gunther]

Hallo Tobias!

Nun habe ich das Problem, dass ich im Header meiner Website ein Dropdown-Menü habe, dessen Untermenüanzeige beim Aufklappen immer sichtbar - also auf oberster Ebene - sein soll. Nun gibt es im Content der Website allerdings ein Element nahe des Hauptmenüs, das - genau wie die Untermenüanzeige des Menüs - mit position:absolute positioniert wurde. Durch die Positionierung wurde dem Element damit automatisch ein Wert für z-index zugewiesen.

Es wäre sehr hilfreich, wenn du deinen relevanten Code hier posten würdest.
Ansonsten hast du schon gelesen?

Gruß Gunther

[Tobias S.]

Hallo Gunther

Es wäre sehr hilfreich, wenn du deinen relevanten Code hier posten würdest.

Kein Problem!

Hier der HTML-Code, der eine Untermenüanzeige definiert:

<table id='sub_1' border=0 cellpadding=0 cellspacing=0 class='sub_table_off' style='position:absolute;z-index:10;display:none' onmouseover='submenue_oeffnen(1)' onmouseout='submenue_timeout()'>
...
</table>

Zur Erläuterung:
onmouseover und -out blenden das Untermenü ein und wieder aus. Die CSS-Klasse "sub_table_off" ist für das Aussehen des Untermenüs zuständig und vom Anwender (bei dem Menü handelt es sich um ein Modul eines CMS) frei modifizierbar. z-index:10 sei ein hoher Testwert. Das Untermenü liegt innerhalb einiger verschachtelter DIV-Tags, die die Modul-Ausgabe steuern.

Hier nun der HTML-Code, der das Inhaltselement definiert:

<table border=0 cellpadding=0 cellspacing=0>
<tr>
 <td valign='bottom' class='first_letter'>I</td>
 <td valign='bottom'>
  <div class='headline' style='position:relative;left:0px;top:0px;'>mpressum
   <div class='overlay' style='position:absolute;z-index:1'>mpressum
   </div>
  </div>
 </td>
</tr>
</table>

Zur Erläuterung: Hierbei handelt es sich um die Überschrift "Impressum", deren erster Buchstabe "I" gesondert formatiert wird (CSS-Klasse "first_letter"). Der nachfolgende Text "mpressum" wird zweimal ausgegeben, wobei die erste Ausgabe "headline" den Schatten der zweiten Ausgabe "overlay" darstellt. Damit sich beide Ausgaben überschneiden muss die innere DIV-Box absolut positioniert werden. Die genaue Position (left, top) wird innerhalb der CSS-Klasse "overlay" festgelegt. z-index stellt einen symbolisch kleinen Wert dar. Auch bei dieser Tabelle handelt es sich um ein Modul, das in mehreren DIV-Tags verschachtelt wurde.

Da ich auf die Z-Position aller umschließenden DIV-Tags keinen Einfluss nehmen kann, sondern wirklich nur auf den Code, der durch die Module erzeugt wird ...

Ansonsten hast du schon gelesen?

... liefert dieser mir bereits bekannte Sachverhalt auch keine neuen Erkenntnisse.

Die Frage ist: Wie kann ich ein Element A vor ein Element B bekommen, wenn ich die A und B umgebenden Strukturen nicht kenne und A im Quellcode auf jeden Fall vor B liegt? Im obigen Code sind die Angaben zu z-index sowohl in A als auch in B wirkungslos.

Gruß,
Tobias

[Gunther]

Hallo Tobias!

Also wenn dieser ganze "Code-Wust" aus einem CMS stammt, dann solltest du schleunigst auf ein anderes Script umsteigen.

Erstens werden dort Tabellen zu Layoutzwecken missbraucht, und zum Zweiten dann auch noch mit einer "DIV-Suppe" gewürzt - beides ohne erkennbare Not!

Auch kann ich aus den Code-Schnippseln keinen zwingenden Grund erkennen, warum man hier auf eine absolute Positionierung zurückgreifen sollte. Diese ist immer mit dem Nachteil behaftet, dass die jeweiligen Elemente aus dem normalen Fluß genommen werden (genauso wie bei fixer Positionierung).

Ansonsten hast du schon gelesen?

... liefert dieser mir bereits bekannte Sachverhalt auch keine neuen Erkenntnisse.

Nun, er sagt dir u.a. "Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'.", dass du dein Problem mit einer relativen Positionierung, oder einer absoluten Positionierung_innerhalb_einer relativen Positionierung der semantisch korrekten Elemente, vermutlich nicht haben wirst.

Gruß Gunther