Schichtung verschachtelter Ebenen

[Heinzelhund]

Hallo Allesamt,

ich möchte zwei ineinander verschachtelte Elemente mittels den z-index übereinander schichten, wobei das höher liegende Element (rotes Quadrat) das Untere (blaues Quadrat) nach unten weg überlappt.

Das ist ja relativ einfach. Jetzt möchte ich jedoch, dass das höher liegende, überlappende Element auch anschließende Elemente überlappt. In meinem unteren Beispiel hieße das, dass das rote Quadrat auch das Grüne überlappen sollte.

Da das Ganze mittels einer Schleife ausgegeben wird, kann ich nicht einfach den z-index von id="blau" höher setzen als id="gruen". Zur Illustration hier ein kleines Beispiel:

<!-- 1. Schleifendurchgang -->
<div id="blau" style="position: relative; width: 100px; height: 100px; z-index: 1; background-color: navy; margin-bottom: 15px;">
  <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; z-index: 2; background-color: red;"></div>
</div>

<!-- 2. Schleifendurchgang -->
<div id="gruen" style="position: relative; width: 100px; height: 100px; z-index: 1; background-color: green;">
  <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; z-index: 2; background-color: yellow;"></div>
</div>

etc.

Ciao
Heinzelhund

[Schuer]

Da das Ganze mittels einer Schleife ausgegeben wird, kann ich nicht einfach den z-index von id="blau" höher setzen als id="gruen"

Warum nicht? Das untere Element (war es vorher nicht rot statt grün?) kann einen z-index von 12.367 erhalten, das Blaue die 1, und alle anderen Elemente irgendwas dazwischen, solange es nicht mehr als 12.365 sind..

Oder hab ich das Problem nicht verstanden?

Viele Grüße!
_Dirk
DECAF°

[Heinzelhund]

Hallo,

Warum nicht? Das untere Element (war es vorher nicht rot statt grün?) kann einen z-index von 12.367 erhalten, das Blaue die 1, und alle anderen Elemente irgendwas dazwischen, solange es nicht mehr als 12.365 sind..

»»

Oder hab ich das Problem nicht verstanden?

doch du hast das Problem schon richtig verstanden und so werde ich es letztlich machen müssen. Es gibt dabei jedoch das Problem, dass die einzelnen Elemente zwar der Reihe nach abgearbeitet werden, ich aber designbedingt nicht unbedingt sicher sein kann, dass der fordere Schleifendurchgang immer auch grafisch vor dem Folgenden liegt. In seltenen Fällen kann es auch schon einmal umgekehrt sein. :-(

In Opera und Firefox funktioniert es so, dass man dem umschließenden Tags keine Ebene zuordnet und lediglich dem verschachtelten, grafisch das folgende Element überlappenden Quadrat einen z-index verpasst. Dann liegen diese immer höher. IE ignoriert meinen z-index in eingeschlossenen Tags leider. Welches vom Standard nun richtig ist, weiß ich aber auch nicht.

Ciao
Heinzelhund

P.S.: Ist es eigentlich möglich, hier kleine Bilder hochzustellen, denn dann wäre mein Beispiel auffallend einfacher zu verstehen?

[Schuer]

[..] dass der fordere Schleifendurchgang immer auch grafisch vor dem Folgenden liegt. In seltenen Fällen kann es auch schon einmal umgekehrt sein.

Deshalb auch mein Vorschlag, den z-index nicht nur von 1-3 zu benutzen, sondern stattdessen auch mit großen Zahlen zu spielen. Wenn es nur darum geht, ein Element vorne und eins hinten zu halten, während der Rest der Schleife in der Mitte plaziert wird, reicht es doch aus, dass du ihnen z-Indexe zwischen 2 und etwa 79 gibst, während das Vordere 1 und das Hintere 80 bekommt?

IE ignoriert meinen z-index in eingeschlossenen Tags leider.

Sollte er aber nicht. Bist du sicher, dass du das Markup nicht fehlerhaft ausgibst?

Ist es eigentlich möglich, hier kleine Bilder hochzustellen

http://forum.de.selfhtml.org/faq/#Q-19

Viele Grüße!
_Dirk
DECAF°

[Heinzelhund]

Hallo,

IE ignoriert meinen z-index in eingeschlossenen Tags leider.

»»

Sollte er aber nicht. Bist du sicher, dass du das Markup nicht fehlerhaft ausgibst?

Sicher ist man ja nie ;-), aber hier noch mal mein leicht angepasstes Beispiel:

<!-- 1. Schleifendurchgang -->
<div id="blau" style="position: relative; width: 100px; height: 100px; background-color: navy; margin-bottom: 15px;">
  <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; z-index: 2; background-color: red;"></div>
</div>

<!-- 2. Schleifendurchgang -->
<div id="gruen" style="position: relative; width: 100px; height: 100px; background-color: green; margin-bottom: 15px;">
  <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; z-index: 2; background-color: yellow;"></div>
</div>

<!-- weitere Schleifendurchgaenge ... -->

Diese Variante ergibt in Firefox und Opera genau das, was ich bräuchte. Hier ließen sich die beiden Elemente in der grafischen Anordnung mittels CSS auch einfach umdrehen und ergäben immer noch das Beabsichtigte.

Als Workaround bliebe dann nur das von dir Vorgeschlagene. Da die Daten aus einer DB kommen, kann ich die Schleifendurchgänge einfach zählen und muss dann halt für die umschließenden Divs einen rückwärts gezählten z-index angeben.

Das Problem bei dieser Lösung bleibt, dass ich auf die eigentliche Platzierung der verschachtelten Elemente nicht wirklich Einfluss habe. Legt mir nun jemand anderes (User sollen dies können!) den 2. Schleifendurchgang mittels einer optionalen absoluten Positionierung grafisch vor den ersten, stimmt meine z-index-Anordnung nicht mehr.

Ideal wäre eine CSS-Angabe, die (eventuell MS proprietär) den IE zu einem gleichen Verhalten wie Opera oder Firefox bei meinem obigen Beispiel nötigt.

Ciao
Heinzelhund