スティッキー配置の「bottom: 0」が期待に反して動作するのはなぜですか?-CSSチュートリアル-php.cn

スティッキー配置の「bottom: 0」が期待に反して動作するのはなぜですか?

Mary-Kate Olsen

リリース： 2024-11-26 18:37:11

オリジナル

153 人が閲覧しました

Why Does `bottom: 0` in Sticky Positioning Act Opposite to Expectations?

スティッキー配置での予期しない動作:bottom: 0

開発者が CSS の位置プロパティを調べる際に、bottom を指定すると予期しない動作が発生する可能性があります。固定配置の場合は 0。 MDN のドキュメントによると、スティッキー要素は最初は、指定されたしきい値に達するまで相対位置要素として扱われ、しきい値に達した時点で固定配置に切り替わります。ただし、bottom: 0 が指定されている場合は、逆の動作が発生します。

期待される動作と実際の動作

MDN ドキュメントでは、bottom: 0 の要素は次のようにする必要があると示唆されています。ビューポートの下の場合は相対、ビューポートの上の場合は固定です。ただし、実際の動作は逆になります。要素はビューポートの下では固定され、ビューポートの上では相対的になります。

説明

この矛盾は、MDN ドキュメントの表現に起因します。。スティッキー要素は、しきい値を超えるまで相対として扱われるが、必ずしも相対として開始されるわけではないと述べています。 Bottom: 0 の場合、要素はビューポートの下部から始まるため、最初からしきい値を事実上超えています。したがって、要素は固定として開始され、開始点を超えてスクロールすると相対的になります。

例の図

次の HTML および CSS コードを考えてみましょう:

<body>

ログイン後にコピー

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

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

ログイン後にコピー

この例では、要素 A は相対として開始され、下にスクロールすると固定になります。一方、要素 B は固定として開始され、上にスクロールすると相対的になります。この動作は、上記で説明した実際の動作と一致しており、bottom: 0 の場合、最初に位置が固定されます。

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