ホームページ >ウェブフロントエンド >CSSチュートリアル >スティッキー配置の「bottom: 0」が期待に反して動作するのはなぜですか?
スティッキー配置の「bottom: 0」が期待に反して動作するのはなぜですか?
- Mary-Kate Olsenオリジナル
- 2024-11-26 18:37:11154ブラウズ
スティッキー配置での予期しない動作: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 サイトの他の関連記事を参照してください。