Heim >Web-Frontend >CSS-Tutorial >Warum funktioniert mein Sticky-Element nicht in seinem übergeordneten Container?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-27 08:46:09840Durchsuche

Why Isn't My Sticky Element Working Inside Its Parent 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn