スティッキー ポジショニングが MDN ドキュメントの説明と異なる動作をするのはなぜですか?

スティッキー位置の動作の不一致を精査する

MDN ドキュメントでは、要素を相対配置から固定配置に一度移行する属性としてスティッキー配置を説明しています。定義されたしきい値を超えた場合。ただし、実際には動作が異なります。この矛盾は、これらの状態が実装される順序の誤解から生じています。

MDN によると、スティッキー位置要素は、最初は、しきい値を超えるまで相対位置要素のように動作します。ただし、bottom:0を指定したコンテキストでは、初期状態ですでに閾値を超えています。その結果、要素は直接固定配置に入り、要素の位置がビューポートの下部から 0px を超えるまでそのまま残ります。

固定位置の状態について

Position:sticky には 2 つの異なる状態があります:

1. 相対状態: 要素は相対的に配置されたオブジェクトのように動作します。
2. 固定状態: 要素はビューポートに対して固定位置に固定されます。

初期状態は、要素の配置と定義されたしきい値によって決まります。 Bottom:0 の場合、すぐにしきい値を超えて初期固定状態になります。ビューポートがスクロールしても、下端からの距離が 0px より大きくなるまで、要素は固定されたままになります。この時点で、相対的な状態に戻ります。

動作の説明

次のコード スニペットを考えてみましょう。

body {
  height:150vh;
  margin:0;
  display:flex;
  flex-direction:column;
  border:2px solid;
  margin:50px;
}

.b {
  margin-top:auto;
  position:sticky;
  bottom:0;
}

.a {
  position:sticky;
  top:0;
}

<div class="a"> 
  I will start relative then I will be fixed
</div>
<div class="b"> 
  I will start fixed then I will be relative
</div>

要素 A (top:0) は、最初は相対として動作し、要素 A が先頭に達すると固定に移行します。ビューポート。要素 B (bottom:0) は、直ちに固定位置で開始され、ビューポートの下部からの距離が 0px を超えると相対位置に遷移します。

以上がスティッキー ポジショニングが MDN ドキュメントの説明と異なる動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。