wake-up-neo.com

Warum funktioniert der Z-Index nicht?

Wenn ich also z-index Richtig verstehe, wäre es in dieser Situation perfekt:

enter image description here

Ich möchte das untere Bild (das Tag/die Karte) unter dem Div darüber platzieren. Sie können also die scharfen Kanten nicht sehen. Wie mache ich das?

z-index:-1 // on the image tag/card

oder

z-index:100 // on the div above

funktioniert auch nicht. Weder tut eine Kombination von so etwas. Woher?

htmlcsscss3z-index
156
Linkjuice57

Das z-index Eigenschaft funktioniert nur für Elemente mit einem anderen position Wert als static (z. B. position: absolute;, position: relative;, oder position: fixed).

Es gibt auch position: sticky;, das in Firefox unterstützt wird, in Safari als Präfix verwendet wird, in älteren Versionen von Chrome unter einem benutzerdefinierten Flag gearbeitet hat und von Microsoft in Betracht gezogen wird, es dem Edge-Browser hinzuzufügen.

372
Evert

Wenn Sie die Position auf einen anderen Wert als static setzen, aber das z-index Ihres Elements immer noch nicht funktioniert, ist möglicherweise für ein übergeordnetes Element z-index Festgelegt.

Die Stapelkontexte haben eine Hierarchie, und jeder Stapelkontext wird in der Stapelreihenfolge des Stapelkontexts des übergeordneten Kontexts berücksichtigt.

Also mit folgendem HTML

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

egal wie groß das z-index von el3 sein wird, es wird immer unter el1 sein, da sein Elternteil einen niedrigeren Stapelkontext hat. Sie können sich die Stapelreihenfolge als Ebenen vorstellen, in denen die Stapelreihenfolge von el3 Tatsächlich 3,8 beträgt, was niedriger ist als 5 .

Wenn Sie Stapelkontexte von übergeordneten Elementen überprüfen möchten, können Sie dies verwenden:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Es gibt einen großartigen Artikel über das Stapeln von Kontexten in MDN

49
Buksy

Ihre Elemente müssen ein position -Attribut haben. (z. B. absolute, relative, fixed) oder z-index funktioniert nicht.

26
clem

In vielen Fällen muss ein Element positioniert werden, damit z-index Funktioniert.

In der Tat würde die Anwendung von position: relative Auf die Elemente in der Frage das Problem wahrscheinlich lösen (aber es wird nicht genügend Code bereitgestellt, um es sicher zu wissen).

Tatsächlich aktivieren position: fixed, position: absolute Und position: sticky Auch z-index, Aber diese Werte ändern auch das Layout. Mit position: relative Wird das Layout nicht gestört.

Solange das Element nicht position: static (Standardeinstellung) ist, gilt es als positioniert und z-index Funktioniert.

Viele Antworten auf "Warum funktioniert Z-Index nicht?" Fragen besagen, dass z-index nur auf positionierten Elementen funktioniert. Ab CSS3 ist dies nicht mehr der Fall.

Elemente, die flex items oder grid items kann z-index verwenden, auch wenn positionstatic ist.

Aus den Angaben:

4.3. Flex Item Z-Ordering

Flex-Elemente Malen Sie genauso wie Inline-Blöcke, mit der Ausnahme, dass die geänderte Dokumentreihenfolge anstelle der Reihenfolge der Rohdokumente verwendet wird und andere z-index - Werte als auto einen Stapelkontext erstellen, auch wenn position ist static.

5.4. Z-Achsen-Reihenfolge: Die Eigenschaft z-index

Die Zeichenreihenfolge von Rasterelementen entspricht genau den Inline-Blöcken, außer dass die in der Reihenfolge geänderte Dokumentreihenfolge anstelle der Reihenfolge der Rohdokumente verwendet wird und andere z-index - Werte als auto einen Stapelkontext erstellen auch wenn positionstatic ist.

Hier ist eine Demonstration von z-index, Die an nicht positionierten flexiblen Elementen arbeitet: https://jsfiddle.net/m0wddwxs/

20
Michael_B