|
|||
Frage zum z-index
Moin, moin,
mich beschäftigt gerade ein Problem mit dem z-index. Vielleicht kann mir da jemand helfen? Das wäre super. Es geht um folgendes: Wenn ich auf einer Webseite mehrere Elemente mit z-index habe, und jedes dieser Elemente hat Child-Elemente, dann habe ich mehrere Stapel angelegt. Um ein einfaches Beispiel zu nennen, sehen wir uns zwei Stapel an: Stapel 1: Das Elternelement hat z-index: 1 Stapel 2: Das Elternelement hat z-index: 100 Wenn ich jetzt ein Child-Element von Stapel 1 anlege und ihm den z-index 101 oder auch 1000000 gebe: Es wird immer hinter allen Elementen von Stapel 2 gezeigt werden. Meine erste Frage ist: Wie kann ich ein einzelnes Child-Element von Stapel 1 VOR den gesamten Stapel 2 bringen? Und Frage 2: Kann ich ein Child-Element von Stapel 1 sogar zwischen ausgewähle Elemente von Stapel 2 platzieren? Danke für Ideen! Leider finde ich im Web keine Lösungen für mein Problem Rabo |
Sponsored Links |
|
||||
Was Du beschreibst, wäre, laut Spezifikation, das zu erwartende Verhalten:
https://www.w3.org/TR/CSS22/visuren.html#z-index Wonach Du fragst, wurde vom älteren IE „beherscht“. Aber nur weil er sich an die Spezifikationen nicht halten könnte. „Tricksen“ kann man da schon – die Stapelung muss ja nicht auf der gleichen Ebene anfangen. Überlappen von auf einander folgenden Elementen geht auch mit negativen Margins. Was später kommt, überlappt das Element davor. Allein ein „position: relative“ ohne weiteres beim (im Quelltext) oberen Element, ändert wiederum die Reihenfolge der Stapelung. Wenn Du das geschickt kombinierst, ist einiges möglich . |
Sponsored Links |
|
|||
Hi etux, danke für die Antwort. Aber leider hilft es (noch) nicht wirklich.
Ich arbeite an einer Seite, die ein Premium-Wordpress-Theme nutzt. Das Theme nutzt z-Layer ohne Ende und ich stehe jetzt vor der spannenden Aufgabe einen der Layer, der in einem Stapel weiter unten abgelegt ist, nach vorne zu holen. Die Ausgangssituation ist also so, dass ich die Stapel nicht grundsätzlich umbauen kann. So verstehe ich deinen Vorschlag. D. H. ich muss die vorhandene Sortierung akzeptieren, sie aber an der entscheidenden Stelle aufbrechen. Wenn ich dem im Quelltext vorangestellten Element (also dem Eltern-Element) ein "position: relative" verpasse, ändert sich gar nichts. Weder wenn ich das für den gesamten Stapel mache, noch wenn ich es für den Layer mache, den ich verschieben will. Das habe ich bereits probiert. Trotzdem muss es doch irgendwie möglich sein einen Layer aus dem hinteren Stapel nach vorne zu bringen. @*IE: Haha. Guter Einwand. Der konnte so manches, was die anderen nicht konnten. |
|
|||
Hi Emil,
Sorry, ich meinte natürlich z-index und nicht z-layer. Aber zurück zum Thema:Irgenwie hab ich einen Knoten im Hirn. Hier wird darauf eingegangen: https://philipwalton.com/articles/wh...about-z-index/ Aber was bewirkt das jetzt genau, wenn ich einem Childelement innerhalb eines Stapels die opacity 0.99 zuteile? 1) Wird der Stapel dann - ab dem einen Element das die opacity <1 erhält - aus dem Verlauf der z-indizes rausgenommen? 2) Oder wird nur dieses eine Element mit der kleineren opacity aus der z-index Reihenfolge rausgenommen? 3) Oder funktioniert das mit der opacity nur für die Elternelemente? Da wäre es aber wiederum eher sinnlos. Weil die Elternelemente kann ich ja als einzige ohnehin direkt ansprechen und ihnen über CSS einen anderen z-index geben. Hat jemand eine Erklärung, was man jetzt genau mit der opacity bezüglich z-index machen kann? Das Beispiel im Artikel ist ja ein wenig künstlich, denn das rote Element könnte ich ja auch direkt über CSS ansprechen (Fall 3 eben) Was mich interessiert, das ist, wie man eine gegebene Struktur von Stapeln wenigstens teilweise korrigieren oder anpassen kann. Sorry, ich stehe offensichtlich auf der Leitung. Danke für Ideen! Raphael |
|
||||
1) Nein
2) Nein, ganz im Gegenteil: selbst wenn das Element bis dahin kein Stapelung-Kontext etabliert hat, tut es jetzt 3) Nein, die Kindelemente gehören dazu Im Beispiel auf Deinem Link passiert folgendes. Alle drei Elemente sind absolute positioniert. Wenn sie auf einander liegen, gilt die Reihenfolge im Quelltext: wer später kommt – gewinnt (liegt auf dem davor). Bekommt das erste Element ein z-index: 1 (Initial Wert ist 0), gewinnt es über die Anderen. Wenn es dann auch ein opacity kleiner als 1 bekommt, etabliert das ein neues Stapelung-Kontext bei dem z-index auf Initialwert gesetzt wird (0). Also haben jetzt alle Elemente gleiche Werte für z-index und es wird wieder die Reihenfolge im Quellcode entscheidend. Zitat:
. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jQuery - Frage zu Selektoren | blade_runner | Javascript & Ajax | 3 | 05.09.2011 14:46 |
Wie Index For Schleife mit JQuery? | ceylan1000 | Javascript & Ajax | 1 | 08.02.2009 23:20 |
Doctype Verständniss Frage | Midnight Run | (X)HTML | 4 | 26.12.2008 04:16 |
Frage zu einem Gedanken (DIV positionieren) | charlie | CSS | 1 | 06.09.2008 12:36 |
Frage zu "display:block;" | John | CSS | 1 | 05.04.2005 17:58 |