zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Frage zum z-index

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.09.2016, 22:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.09.2016, 07:02
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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


.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.09.2016, 10:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.09.2016, 11:21
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

In Deinem kleinen Beispiel von oben, wenn ich es richtig verstanden habe, sind zwei Geschwister-Elemente, die jeweils Kindelemente haben. Eine Verschachtelung deren Kindelementen ist nicht möglich, wenn die Elternelemente (die zwei Geschwister) jeweils ein Stapelkontex etablieren. Spricht, haben zumindest ein „position: relative“. Daher mein Link zu den Spezifikationen.
Mein Beitrag von oben sollte Dir auch keine fertige Lösung liefern, sondern nur zeigen, worauf es ankommen könnte. Spricht, was Dir zuerst klar sein muss, bevor Du eine Lösung findest. Dich darüber schlau machen, muss Du schon selber.
Was Dein wirkliches Problem angeht: keine Ahnung. Eine Kristallkugel habe ich nicht und von Layern habe ich seit Netscape Zeiten nichts mehr gehört

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 27.09.2016, 22:36
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 27.09.2016, 23:05
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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:
Zitat von RaBo Beitrag anzeigen
Was mich interessiert, das ist, wie man eine gegebene Struktur von Stapeln wenigstens teilweise korrigieren oder anpassen kann.
Kann ich Dir nicht sagen, da ich Deine Struktur nicht kenne

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 28.09.2016, 01:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

Hi Etux,
danke. Jetzt verstehe ich es besser!
Raphael
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:31 Uhr.