「bottom: 0」のスティッキー要素がスティッキーに見えないのはなぜですか?

CSS のスティッキー配置とその上下の動作について理解する

CSS のスティッキー配置により、要素は、特定のしきい値を超えると、相対的に配置されます。ただし、スティッキー要素で 'bottom: 0' を使用すると、矛盾があるようです。

問題の説明:

次のコードを考えてみましょう:

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

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

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

「move」を「top:0」に設定すると、ピンクのブロックは期待どおりに動作します。ただし、「move」が「bottom:0」に設定されている場合、切り離されたように見え、固定されたままではなくなります。

スティッキー要素を使用した「bottom: 0」の動作を理解する:

この動作を理解するには、スティッキーの定義を理解することが重要ですPositioning:

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.

「bottom: 0」の場合、スティッキー要素は、それを含むブロックの下端に貼り付けられているため表示されません。スクロール位置がしきい値を超えると、それを含むブロックは上に移動しますが、スティッキー要素は下端に固定されたままになります。スティッキー要素はすでに最下部にあるため、これ以上上に移動することはできません。

スティッキーの動作を観察するには、それを含むブロックにスティッキー要素を収容するのに十分な高さがあることを確認してください。ブロック要素に十分な上マージンを設けることで、ページをスクロールして、スティッキー要素が下部に付着しているのを確認できます

以上が「bottom: 0」のスティッキー要素がスティッキーに見えないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。