Warum funktioniert Z-Index nicht mit Elementen mit fester Positionierung?

z-index funktioniert nicht mit fester Positionierung: Den Grund finden

Feste Positionierung ist ein leistungsstarkes Werkzeug zum Erstellen von Elementen, die an Ort und Stelle bleiben unabhängig vom Scrollen auf dem Bildschirm angezeigt. Es kann jedoch manchmal zu Konflikten mit der Z-Index-Eigenschaft kommen, die die Stapelreihenfolge von Elementen steuert.

Betrachten Sie zur Veranschaulichung den folgenden Codeausschnitt:

#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 zu erwarten, Das #over-Element sollte über dem #under-Element erscheinen, da es einen höheren Z-Index hat. Allerdings überlagert in diesem Szenario #under immer noch #over. Warum passiert das?

Die Antwort liegt in der Standardpositionierung von #over. Standardmäßig haben Elemente eine statische Positionierung, was bedeutet, dass sie ihre natürliche Position im Dokumentenfluss einnehmen. Feste Positionierungselemente hingegen werden aus dem normalen Fluss entfernt und an bestimmten Koordinaten relativ zum Ansichtsfenster der Seite platziert.

In diesem Fall wird sie durch die feste Position von #under aus dem normalen Fluss entfernt , und daher wird sein Z-Index für Elemente mit statischer Positionierung irrelevant. Damit #under hinter #over erscheint, müssen wir die Positionierung von #over auf relativ setzen. Dadurch wird #over im Dokumentenfluss platziert, es kann jedoch seine Position entsprechend dem angegebenen Z-Index verschieben.

Hier ist das feste Code-Snippet:

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

Nun das #under Element erscheint wie erwartet unter #over. Denken Sie daran, dass Elemente entweder absolut oder relativ positioniert sein müssen, damit der Z-Index ordnungsgemäß funktioniert.

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