Warum funktioniert mein Sticky-Element nicht in seinem übergeordneten Container?

Sticky-Elemente funktionieren nicht in übergeordneten Elementen

Es kann vorkommen, dass sich position: sticky nicht wie erwartet verhält, wenn es in einem anderen Element verschachtelt ist.

Das Problem entsteht, weil position: sticky die Größe des übergeordneten Elements berücksichtigt. Wenn die Höhe des übergeordneten Elements durch sein klebriges untergeordnetes Element bestimmt wird, gibt es keinen Platz, an dem sich das untergeordnete Element festhalten kann.

Beispiel:

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

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

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

Hinzufügen eines Rand zur Visualisierung des Problem:

.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>

Lösung:

Um dieses Problem zu lösen, stellen Sie sicher, dass die Größe des übergeordneten Elements unabhängig definiert ist und Platz für das klebrige untergeordnete Element bleibt. Dies kann mithilfe von CSS-Eigenschaften wie height oder min-height erreicht werden.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Sticky-Element nicht in seinem übergeordneten Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!