Warum unterbricht die feste Positionierung die Z-Index-Reihenfolge?

Verstehen Sie das Z-Index-Paradoxon mit fester Positionierung

Beim Umgang mit HTML-Elementen steuert die Z-Index-Eigenschaft die Stapelreihenfolge und bestimmt welches Element über oder unter anderen auf der Seite erscheint. Allerdings tritt ein unerwartetes Verhalten auf, wenn Z-Index mit fest und statisch positionierten Elementen verwendet wird.

Beachten Sie den folgenden Codeausschnitt:

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

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

Sie würden erwarten, dass das Element mit #over angezeigt wird hinter #under, da es einen höheren Z-Index-Wert hat. Das feste Element (#under) überlagert jedoch hartnäckig #over und ignoriert seine vermeintlich niedrigere Priorität.

Das liegt daran, dass durch die feste Positionierung ein Element aus dem normalen Dokumentenfluss entfernt wird. Es positioniert das Element basierend auf dem Ansichtsfenster und erstellt im Wesentlichen eine separate Ebene darüber. Daher interagiert der Z-Index fester Elemente nicht mit dem Z-Index nicht fester Elemente.

Um dieses Problem zu beheben und zu ermöglichen, dass #over hinter #under erscheint, fügen Sie position: relative hinzu ; zu #over:

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

Diese kleine Anpassung erstellt einen neuen lokalen Stapelkontext innerhalb von #over und ermöglicht seinem Z-Index, Elemente in diesem Kontext zu beeinflussen. Jetzt wird #under korrekt hinter #over angezeigt, wobei die beabsichtigte Stapelreihenfolge beachtet wird.

Denken Sie daran, dass die feste Positionierung ein leistungsstarkes Werkzeug zum Erstellen einer absoluten Positionierung auf der Seite ist, bei der Interaktion mit dem Z-Index jedoch Einschränkungen unterliegt in bestimmten Szenarien. Durch die Anwendung des Tricks „Position: Relativ“ können Sie die Kontrolle über die Stapelreihenfolge wiedererlangen und die gewünschten Schichtungseffekte erzielen.

Das obige ist der detaillierte Inhalt vonWarum unterbricht die feste Positionierung die Z-Index-Reihenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!