Wie wirkt sich ein Überlauf auf die Sticky-Positionierung im CSS-positionierten Layoutmodul Level 3 aus?

Bildlauffelder im CSS Positioned Layout Module Level 3

Das CSS Positioned Layout Module Level 3 definiert die Sticky-Positionierung, die dem Verhalten ähnelt einer relativ positionierten Box. Der Versatz wird jedoch im Hinblick auf den nächstgelegenen Vorfahren mit einem Bildlauffeld oder das Ansichtsfenster berechnet, wenn kein Vorfahre über ein Bildlauffeld verfügt.

Was gilt als Bildlauffeld?

Ein Bildlauffeld ist ein Feld, in dem der Überlaufwert auf einen anderen Wert als den sichtbaren Wert (Standardeinstellung) eingestellt ist. Dies basiert auf früherer Dokumentation, in der Probleme mit Sticky-Elementen aufgrund eines Überlaufs auftraten.

Auswirkung des Überlaufs auf die Sticky-Positionierung

Wenn ein Element mit Overflow: Hidden ein Vorfahre ist eines position: sticky-Elements, dessen Offset wird basierend auf der Ancestor-Box mit verstecktem Überlauf berechnet. Dadurch wird das Scrollverhalten eingeschränkt, sodass das Sticky-Element nicht sichtbar ist.

Codebeispiel

.wrapper {
  height:200vh;
  border:2px solid;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

Das obige ist der detaillierte Inhalt vonWie wirkt sich ein Überlauf auf die Sticky-Positionierung im CSS-positionierten Layoutmodul Level 3 aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!