Warum funktioniert der Z-Index nicht?

Wenn ich das z-indexrichtig verstehe , wäre es in dieser Situation perfekt:

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. Eine Kombination aus so etwas auch nicht. Woher?

Die z-indexEigenschaft funktioniert nur auf Elemente mit einem positionanderen Wert als static(zB position: absolute;, position: relative;oder position: fixed).

Es gibt auch das position: sticky;, was in Firefox unterstützt wird, in Safari vorangestellt ist, eine Zeit lang in älteren Versionen von Chrome unter einem benutzerdefinierten Flag gearbeitet hat und von Microsoft in Betracht gezogen wird, um es seinem Edge-Browser hinzuzufügen.

Wichtig Achten
Sie bei der regelmäßigen Positionierung darauf, dass position: relativeSie die Elemente einbeziehen, für die Sie auch die festlegen z-index. Andernfalls wird es nicht wirksam.

Wenn Sie die Position auf einen anderen Wert als setzen static, Ihr Element jedoch z-indeximmer noch nicht zu funktionieren scheint, wurde möglicherweise ein übergeordnetes Element z-indexfestgelegt.

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>

Unabhängig davon, wie groß das z-indexvon el3gesetzt wird, wird es immer unter sein, el1da das übergeordnete Element einen niedrigeren Stapelkontext hat. Sie können sich die Stapelreihenfolge als Ebenen vorstellen, in denen die Stapelreihenfolge el3tatsächlich 3,8 beträgt, was niedriger als 5 ist .

Wenn Sie Stapelkontexte übergeordneter Elemente überprüfen möchten, können Sie Folgendes 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 auf MDN

Ihre Elemente müssen ein positionAttribut haben. (zB absolute, relative, fixed) oder z-indexnicht funktionieren.

In vielen Fällen muss ein Element positioniert werden, damit z-indexes funktioniert.

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

Eigentlich position: fixed, position: absoluteund position: stickywird auch ermöglichen z-index, aber diese Werte auch das Layout ändern. Mit position: relativedem Layout wird nicht gestört.

Solange das Element nicht vorhanden ist position: static(Standardeinstellung), wird es im Wesentlichen als positioniert betrachtet und z-indexfunktioniert.

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

Elemente, die flexible Elemente oder Rasterelemente sind, können auch dann verwendet werden z-index, wenn dies der Fallposition ist static.

Aus den Spezifikationen:

4.3. Flex Artikel Z-Bestellung

Flex-Elemente werden genauso wie Inline-Blöcke gezeichnet, außer dass die Reihenfolge der geänderten Dokumente anstelle der Reihenfolge der Rohdokumente verwendet wird und z-indexandere Werte als das autoErstellen eines Stapelkontexts verwendet werden, selbst wenn dies der Fall positionist static.

5.4. Z-Achsen-Reihenfolge: die z-indexEigenschaft

Die Malreihenfolge von Rasterelementen entspricht genau der von Inline-Blöcken, außer dass die Reihenfolge der geänderten Dokumente anstelle der Reihenfolge der Rohdokumente verwendet wird und z-indexandere Werte als das autoErstellen eines Stapelkontexts verwendet werden, selbst wenn dies der Fall positionist static.

Hier ist eine Demonstration der z-indexArbeit an nicht positionierten Flex-Elementen: https://jsfiddle.net/m0wddwxs/