Warum funktioniert Z-Index bei fester Positionierung nicht wie erwartet?

Z-Index funktioniert nicht mit fester Positionierung

Im Seitenlayout bestimmt der Z-Index die Stapelreihenfolge von Elementen auf einer Webseite. wobei höhere Werte oben erscheinen. Wenn ein Element jedoch fest positioniert ist, scheinbar entgegen der Intuition, kann es schwierig sein, es mithilfe des Z-Index hinter einem statisch positionierten Element zu platzieren.

Beispiel

Betrachten Sie den folgenden HTML- und CSS-Code:

<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;
}

Wie im Beispiel deutlich, trotz des höheren zugewiesenen Z-Index-Werts #over, das fest positionierte Element #under bleibt oben.

Erklärung

Das verwirrende Verhalten ergibt sich aus den inhärenten Unterschieden zwischen statischer und fester Positionierung.

• Bei der statischen Positionierung bleiben Elemente vom Z-Index unberührt, da sie im normalen Fluss des liegen Dokument.
• Feste Positionierung hingegen entfernt Elemente aus dem normalen Fluss und positioniert sie relativ zum Ansichtsfenster (dem Bildschirm des Benutzers).

In diesem Zusammenhang z- Der Index bestimmt nur die Stapelreihenfolge fester Elemente relativ zu anderen festen Elementen Elemente.

Lösung

Um dieses Problem zu beheben, fügen Sie position: relativ zum statisch positionierten Element hinzu. Dadurch wird ein neuer Stapelkontext für #over erstellt, sodass der Z-Index seine Position relativ zum neu erstellten Kontext bestimmen kann:

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

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

Das obige ist der detaillierte Inhalt vonWarum funktioniert Z-Index bei fester Positionierung nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!