Warum funktioniert der Z-Index nicht?

178

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

Geben Sie hier die Bildbeschreibung ein

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?

Linkjuice57
quelle

Antworten:

431

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.

Evert
quelle
3
Wenn Sie zu dieser Antwort hinzufügen, müssen Chrome und wahrscheinlich andere Browser zum position: relative
jetzigen Zeitpunkt explizit angeben,
staticElemente sind statisch und können sich nicht bewegen x, y or z planes. Sie können nicht einziehen x plane (left or right)oder y plane (top or bottom)mögen, wenn wir mit ihnen arbeiten position: absolute. Und sie können sich auch nicht in der bewegen z plane i.e. with z-index.
Akash
Sind Ihnen Probleme bei der Verwendung z-indexin einem Rasterelement bekannt?
Oldboy
58

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

Buksy
quelle
Wie kann man das beheben?
SM Nat
3
Stellen Sie den richtigen Z-Index der übergeordneten Elemente ein.
Buksy
liebe dieses Skript
Matoeil
30

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

Clem
quelle
26

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/

Michael Benjamin
quelle
3
"Elemente, bei denen es sich um flexible Elemente oder Rasterelemente handelt, können den Z-Index auch dann verwenden, wenn die Position statisch ist." Ja, die Spezifikation besagt im Wesentlichen, dass aufgrund der Dynamik dieser Layoutmethoden position: staticgenau das Gleiche wie position: relativebei Flex- und Rasterelementen behandelt werden soll . Ich würde also vielleicht sagen, dass es in CSS3 nicht mehr so ​​ist, dass ein Element positioniert werden muss, sondern dass CSS3 Flex- und Grid-Elemente unabhängig davon so behandelt, als wären sie positioniert. Wahrscheinlich nur zwei Arten, dasselbe zu betrachten.
TylerH
@TylerH Wir sollten auf diesen Teil der Spezifikation achten, da wir statische Werte nur dann relativ als relativ behandeln sollten , wenn wir uns mit dem Z-Index befassen und nicht generell. Sie können beispielsweise ein Flex-Element nicht mit links / oben / unten / rechts verschieben, es sei denn, Sie sind explizit spezifisch position:relative. Nachkommen von Flex-Elementen mit absoluter Position betrachten das Flex-Element nicht als ihren enthaltenden Block, da das Flex-Element nicht positioniert ist. ( jsfiddle.net/0yo7utfL/2 )
Temani Afif
Ich fand einen seltsamen "Bug" mit CSS. aus irgendeinem Grund overflow-y: scrollverhindert zu overflow-x: visiblearbeiten ... können Sie bitte einen Blick darauf werfen?
Oldboy