Warum erscheint mein fest positioniertes Element vor einem statisch positionierten Element mit einem höheren Z-Index?

Z-Index-Problem gelöst: Feste Positionierung verstehen

Trotz der Festlegung von Z-Indizes kann es manchmal schwierig sein, ein fest positioniertes Element zu erstellen hinter einem statisch positionierten erscheinen. Eine häufige Problemumgehung besteht darin, die absolute Positionierung des statischen Elements zu verwenden.

Um dieses Verhalten genauer zu untersuchen, betrachten Sie das folgende Beispiel:

<div>
<pre class="brush:php;toolbar:false">#over {
  width: 600px;
  z-index: 10;
}

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

Wie Sie feststellen werden, ist das Problem behoben Element (mit Z-Index 1) bleibt vor dem statischen Element (mit Z-Index 10). Dies liegt daran, dass statisch positionierte Elemente standardmäßig keinen Stapelkontext haben, was bedeutet, dass sie vom Z-Index nicht betroffen sind.

Um dieses Problem zu beheben, können Sie einen Stapelkontext für das statische Element definieren, indem Sie position: relativ dazu hinzufügen . Dadurch wird eine neue Z-Index-Ebene erstellt, innerhalb derer die Z-Index-Eigenschaft wie erwartet funktioniert.

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

Jetzt erscheint das feste Element wie vorgesehen hinter dem statischen Element. Diese einfache Anpassung sorgt für das richtige Z-Index-Verhalten und ermöglicht Ihnen eine effektive Steuerung der Schichtung von Elementen.