Warum zeigt die Sticky-Positionierung mit „unten: 0' im Vergleich zur MDN-Dokumentation ein umgekehrtes Verhalten?

Das gegenteilige Verhalten von Sticky Positioning verstehen

In der MDN-Dokumentation wird Sticky Positioning als eine Mischung aus relativer und fester Positionierung beschrieben, wobei Ein Element verhält sich wie ein relativ positioniertes Element, bis ein Schwellenwert überschritten wird. Danach verhält es sich wie ein Element mit fester Position. Wenn jedoch unten: 0 für die Sticky-Positionierung angegeben wird, scheint das Verhalten umgekehrt zu sein.

Mechanismus der Sticky-Positionierung

Laut MDN arbeiten Sticky-Position-Elemente mit zwei Zustände:

1. Relativer Modus: Das Element wird relativ zum Fluss seines Containers oder statischen übergeordneten Elements positioniert.
2. Fester Modus: Das Element wird relativ zum Ansichtsfenster positioniert und bleibt an einer festen Position.

Der Übergang zwischen diesen Zuständen erfolgt, wenn der angegebene Schwellenwert überschritten wird.

Szenario-Erklärung

Betrachten Sie das folgende Beispiel:

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

Wenn unten: 0 für das Fußzeilenelement angegeben wird, beginnt es zunächst im festen Zustand, da der Schwellenwert (der untere Teil von des Ansichtsfensters) von Anfang an überschritten wird. Wenn Sie nach unten scrollen, wird der Schwellenwert immer noch überschritten, sodass die Fußzeile an der festen Position bleibt.

Wenn das Fußzeilenelement jedoch den Schwellenwert (den unteren Rand des Ansichtsfensters) erreicht, wechselt es in den relativen Modus, weil der Schwellenwert wird nicht mehr überschritten. Dies ist das Gegenteil von dem, was in der MDN-Dokumentation vorgeschlagen wird, die besagt, dass der Übergang erfolgen sollte, wenn das Element weniger als 0 Pixel vom unteren Rand des Ansichtsfensters entfernt ist.

Sprachfehlinterpretation

Die Mehrdeutigkeit ergibt sich aus der in der MDN-Dokumentation verwendeten Sprache. Die Aussage „bis der Schwellenwert überschritten wird“ impliziert, dass der relative Zustand der Ausgangszustand für die Sticky-Positionierung ist. Dies ist jedoch nicht immer der Fall. Wenn der Schwellenwert bereits überschritten ist, wenn das Element als klebrig erklärt wird, startet es im festen Zustand.

Fazit

Verstehen der beiden Zustände der klebrigen Positionierung und der Übergänge zwischen ihnen auftreten, ist für die effektive Nutzung von entscheidender Bedeutung. Das in der MDN-Dokumentation beschriebene Verhalten kann sich umkehren, wenn der Schwellenwert anfänglich überschritten wird, was zu einem anderen Verhalten als erwartet führt.

Das obige ist der detaillierte Inhalt vonWarum zeigt die Sticky-Positionierung mit „unten: 0' im Vergleich zur MDN-Dokumentation ein umgekehrtes Verhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!