「bottom:0」で「position:sticky」要素がすぐに固定されないのはなぜですか?

なぜ「bottom:0」が Position:Sticky で機能しないように見えるのか

「bottom:0」を使用しようとすると「position:sticky」、最初は要素がスティッキーになっていないように見えるかもしれません。しかし、そうではありません。この動作を理解するために、「sticky」の定義を調べてみましょう。

CSS 仕様によれば、「position:sticky」を持つ要素は、その要素を含むブロックがしきい値を超えるまで、相対的に配置されたままになります。このシナリオでは、包含ブロックはピンク色の「block」要素です。

「bottom:0」を設定すると、包含ブロックの下部がブラウザ ウィンドウ内に表示されると、「move」要素が固定されます。 。ただし、テスト コードでは、「block」要素の高さは 200px で、その中に「move」要素が配置されています。これは、デフォルトでは、「move」要素が、その要素を含むブロック内の表示領域の下部にすでに配置されていることを意味します。結果として、スティッキーになるために必要なしきい値に遭遇することはありません。

「bottom:0」が「position:sticky」とどのように連携するかを示すために、「block」要素に大きなマージンを与えて移動します。それを画面から消します。スクロールを開始すると、「block」要素がブラウザ ウィンドウの上部を越えてスクロールすると、「move」要素が表示されている画面の下部に貼り付き始めることがわかります。

以上が「bottom:0」で「position:sticky」要素がすぐに固定されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。