Warum funktioniert meine Sticky-Navigation nicht, wenn sie in einem positionierten Element verschachtelt ist?

Fehlerbehebung bei „position:sticky“ innerhalb verschachtelter Elemente

Beim Definieren der Sticky-Funktionalität mit „position:sticky“ kann es zu Situationen kommen, in denen die Das Verhalten wird innerhalb verschachtelter Elemente inkonsistent. Sehen wir uns genauer an, warum dies auftritt und wie man es beheben kann.

Das Problem verstehen

„position:sticky“ positioniert ein Element relativ zum Ansichtsfenster und erzeugt so ein „sticky“. " Effekt beim Scrollen. Wenn ein Element jedoch in einem anderen positionierten Element verschachtelt ist, verhält sich die Eigenschaft „position:sticky“ anders.

In Ihrem Beispiel haben Sie einen „nav-wrapper“ mit „position:absolute“ und eine „nav " Element darin mit „position:sticky.“ Das Problem hierbei ist, dass das übergeordnete Element („nav-wrapper“) die Höhe des Sticky-Elements („nav“) definiert und somit keinen Platz für das Sticky-Verhalten innerhalb des übergeordneten Elements lässt.

Behebung des Problems

Um dieses Problem zu beheben, stellen Sie sicher, dass das übergeordnete Element die Höhe des Sticky-Elements nicht einschränkt. Dies kann erreicht werden, indem die feste Höhe entfernt oder flexible Größenoptionen wie „Mindesthöhe“ oder „Maximale Höhe“ verwendet werden.

Beispiel mit Rahmen zur Visualisierung

Hier ist ein Beispiel mit einem Rand, der dem übergeordneten Element zur einfacheren Visualisierung hinzugefügt wurde:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height: 200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

Durch Entfernen der festen Höhe vom übergeordneten Element Element, das Sticky-Verhalten funktioniert nun wie erwartet innerhalb des verschachtelten Elements.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Sticky-Navigation nicht, wenn sie in einem positionierten Element verschachtelt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!