Warum verhält sich „position: sticky' mit „bottom: 0' im Gegensatz zur MDN-Beschreibung?

Entgegengesetztes Verhalten von Position: klebrig mit Boden: 0

Bei der Angabe von Position: klebrig mit Boden: 0 verhält es sich anders als in der Definition bereitgestellt von MDN. Im Gegensatz zur Beschreibung, in der Elemente zunächst als relativ positioniert behandelt werden, bis sie einen Schwellenwert überschreiten und fixiert werden, geschieht das Gegenteil mit der Angabe von „bottom: 0“.

Im bereitgestellten Codebeispiel:

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN gibt an, dass das Fußzeilenelement zunächst relativ positioniert werden sollte, bis es sich weniger als 0 Pixel vom unteren Rand des Ansichtsfensters entfernt. Das beobachtete Verhalten ist jedoch das Gegenteil:

• Beim Scrollen nach unten: Die Fußzeile beginnt mit einer festen Position und wird dann relativ positioniert, wenn die Unterseite der Fußzeile 0 Pixel von unten erreicht des Ansichtsfensters.
• Beim Scrollen nach oben: Die Fußzeile beginnt relativ positioniert und wird dann fest positioniert, wenn der untere Teil des Ansichtsfensters erreicht ist Die Fußzeile bewegt sich über 0 Pixel vom unteren Rand des Ansichtsfensters hinaus.

Grund für das gegenteilige Verhalten

Der Schlüssel zum Verständnis dieses Verhaltens liegt im Wortlaut des MDN Definition: „wird als relative Positionselemente behandelt, bis der angegebene Schwellenwert überschritten wird.“

Dies bedeutet, dass die Anfangsposition durch die HTML-Struktur und den Abstand zum angegebenen Schwellenwert bestimmt wird. Bei „bottom:0“ befindet sich die Fußzeile beim Laden der Seite bereits am unteren Rand des Ansichtsfensters. Somit startet es in einem „festen“ Zustand, da der Schwellenwert (0px von unten) bereits überschritten ist.

Fazit

Daher bei Angabe der Position: Sticky with unten: 0, das Element wird zunächst fest positioniert und geht in eine relative Position über, wenn das Element über den unteren Rand des Ansichtsfensters hinaus bewegt wird. Dieses Verhalten steht im Gegensatz zu dem in der MDN-Dokumentation beschriebenen Verhalten, da die Anfangsposition durch die HTML-Struktur und die Nähe zum angegebenen Schwellenwert bestimmt wird.

Das obige ist der detaillierte Inhalt vonWarum verhält sich „position: sticky' mit „bottom: 0' im Gegensatz zur MDN-Beschreibung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!