Warum scheint mein Sticky-Element mit „unten: 0' nicht zu kleben?

Verstehen der CSS-Sticky-Positionierung und ihres Verhaltens mit oben und unten

Die Sticky-Positionierung von CSS ermöglicht, dass ein Element in seinem enthaltenden Block fixiert bleibt, bis a Eine bestimmte Schwelle wird überschritten, wo es dann relativ positioniert wird. Es scheint jedoch eine Diskrepanz zu geben, wenn „bottom: 0“ mit Sticky-Elementen verwendet wird.

Problemerklärung:

Beachten Sie den folgenden Code:

<div class="block">
  <div class="move">
  </div>
</div>

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

Wenn „move“ auf „top:0“ eingestellt ist, bleibt es am oberen Rand des rosa Blocks hängen, sich wie erwartet verhalten. Wenn „move“ jedoch auf „bottom:0“ gesetzt ist, scheint es sich zu lösen und bleibt nicht mehr fixiert.

Verstehen des Verhaltens von „bottom: 0“ mit klebrigen Elementen:

Um dieses Verhalten zu verstehen, ist es wichtig, die Definition der klebrigen Positionierung zu verstehen:

A stickily positioned element remains relatively positioned until its containing block crosses a specified threshold (such as setting 'top' to a value other than 'auto'), after which it becomes 'stuck' until meeting the opposite edge of its containing block.

Im Fall von „bottom: 0“, das Sticky-Element ist nicht sichtbar, da es am unteren Rand seines enthaltenden Blocks klebt. Wenn die Bildlaufposition den Schwellenwert überschreitet, bewegt sich der enthaltende Block nach oben, das Sticky-Element bleibt jedoch am unteren Rand fixiert. Da sich das klebrige Element bereits unten befindet, kann es sich nicht weiter nach oben bewegen.

Um das klebrige Verhalten zu beobachten, stellen Sie sicher, dass der Halteblock ausreichend hoch ist, um das klebrige Element aufzunehmen. Indem Sie dem Blockelement einen deutlichen oberen Rand hinzufügen, können Sie durch die Seite scrollen und sehen, wie das klebrige Element am unteren Rand haftet

Das obige ist der detaillierte Inhalt vonWarum scheint mein Sticky-Element mit „unten: 0' nicht zu kleben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!