Warum verschwindet meine Sticky-Navigation, wenn sie in einem anderen Element verschachtelt ist?

Problem: Sticky-Position verschwindet, wenn Element verschachtelt ist

In Ihrem CSS haben Sie eine Sticky-Navigation innerhalb eines anderen Elements definiert, aber es behält sein Sticky-Verhalten bei der Verschachtelung nicht bei. Warum passiert das?

Erklärung:

Position: Sticky berechnet seine Position relativ zu seinem übergeordneten Element. Wenn Sie die Navigation in einem anderen Element verschachteln (z. B. .nav-wrapper), bestimmt das übergeordnete Element das Sticky-Verhalten.

Leider wird in Ihrem Beispiel die Höhe des .nav-wrapper durch das Sticky bestimmt. Navigationselement. Daher ist im übergeordneten Element kein Platz verfügbar, an dem das .nav-Element hängen bleiben kann.

Lösung:

Um dieses Problem zu beheben, können Sie einen Rahmen hinzufügen zum übergeordneten Element, um das Problem zu veranschaulichen. Beim Scrollen werden Sie feststellen, dass die Höhe des übergeordneten Elements mit der Höhe der Navigation übereinstimmt, sodass kein Platz für Sticky-Verhalten bleibt.

Beispiel mit Rand:

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

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

body {
  min-height:200vh;
}

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