Warum schlägt die verschachtelte Sticky-Positionierung fehl und wie kann ich das Problem beheben?

Sticky-Positionierungsdilemma: Warum es beim Verschachteln fehlschlägt

Wenn Sie ein Element mit position: sticky in einem anderen Element platzieren, verhält es sich möglicherweise nicht mehr wie erwartet. Das liegt daran, dass bei der Sticky-Positionierung die Abmessungen des übergeordneten Elements berücksichtigt werden.

Das Problem verstehen

Im bereitgestellten Beispiel:

.nav-wrapper {
  position: absolute;
  bottom: 0;
}

Das übergeordnete Element (nav-wrapper) definiert seine Höhe basierend auf der Höhe des Navigationselements.

<div class="nav-wrapper">
  <nav>
    <a href="#">...</a>
    <a href="#">...</a>
  </nav>
</div>

Mit nav hat eine Position: sticky, es wird erwartet, dass es am oberen Rand des Browserfensters bleibt. Da das übergeordnete Element jedoch den gesamten verfügbaren vertikalen Raum einnimmt, gibt es keinen Platz, an dem sich das Navigationselement festhalten kann.

Problem lösen

Damit Sticky funktioniert In diesem Szenario können Sie dem Navigationselement unabhängig von seinem übergeordneten Element eine eigene Höhe zuweisen:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  height: 50px;
}

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

Indem Sie die Höhe beider Elemente festlegen nav-wrapper und nav schaffen Sie genügend vertikalen Raum, damit die Sticky-Positionierung korrekt funktioniert.

Das obige ist der detaillierte Inhalt vonWarum schlägt die verschachtelte Sticky-Positionierung fehl und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!