Warum wirkt sich Z-Index nicht auf fest positionierte Elemente aus?

Element mit fester Positionierung, das nicht vom Z-Index beeinflusst wird

In CSS steuert die Z-Index-Eigenschaft die Stapelreihenfolge von Elementen auf dem Seite, auf der höhere Werte Elemente in den Vordergrund rücken. Allerdings scheinen fest positionierte Elemente manchmal immun gegen Z-Index-Änderungen zu sein.

Dieses Verhalten wird durch die standardmäßige statische Positionierung fester Elemente verursacht. Wenn ein Element mit fester Positionierung in einem anderen Element mit Standardpositionierung platziert wird, entsteht ein Stapelkontext innerhalb dieses Elements. In diesem Kontext liegt das feste Element über allen anderen Elementen, unabhängig von ihrem Z-Index.

Um dieses Problem zu beheben, können Sie dem übergeordneten Element eine relative Positionierung hinzufügen. Dadurch wird ein neuer Stapelkontext innerhalb des übergeordneten Elements erstellt, sodass der Z-Index des festen Elements wirksam wird.

Beispiel:

Berücksichtigen Sie das folgende HTML und CSS:

<div>

#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

In diesem Fall bleibt das #under-Element über dem #over-Element, auch wenn letzteres einen höheren Wert hat Z-Index. Um dies zu beheben, fügen Sie eine relative Positionierung zum #over-Element hinzu:

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

Jetzt funktioniert der Z-Index des #under-Elements wie erwartet und platziert es hinter dem #over-Element.

Das obige ist der detaillierte Inhalt vonWarum wirkt sich Z-Index nicht auf fest positionierte Elemente aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!