オーバーフローは CSS 配置レイアウト モジュール レベル 3 のスティッキー配置にどのような影響を与えますか?

CSS 配置レイアウト モジュール レベル 3 のスクロール ボックス

CSS 配置レイアウト モジュール レベル 3 は、動作に似たスティッキー配置を定義します。相対的に配置されたボックスの。ただし、オフセットは、スクロール ボックスを持つ最も近い祖先、または祖先にスクロール ボックスがない場合はビューポートに関して計算されます。

スクロール ボックスとしての資格は何ですか?

スクロール ボックスは、オーバーフローの値が表示 (デフォルト) 以外の値に設定されているボックスです。これは、オーバーフローが原因でスティッキー要素に関する問題が発生した以前のドキュメントに基づいています。

スティッキー配置に対するオーバーフローの影響

オーバーフロー: 非表示の要素が祖先である場合位置: スティッキー要素の場合、後者のオフセットは、隠されたオーバーフローを持つ祖先ボックスに基づいて計算されます。その結果、スクロール動作が制限され、スティッキー要素が表示されなくなります。

コード例

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

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

以上がオーバーフローは CSS 配置レイアウト モジュール レベル 3 のスティッキー配置にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。