ホームページ >ウェブフロントエンド >CSSチュートリアル >「bottom: 0」の固定配置要素が表示されないのはなぜですか?

「bottom: 0」の固定配置要素が表示されないのはなぜですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-26 09:14:13743ブラウズ

Why Doesn't My Sticky-Positioned Element with `bottom: 0` Appear?

スティッキー配置が 'bottom: 0' で機能しない理由

スティッキー配置により、要素はその要素を含むブロック内で固定されたままになります。指定されたしきい値に達します。ただし、「bottom: 0」を使用すると、この動作が存在しないように見える場合があります。

提供されたコードでは、「move」要素に「position: Sticky」と「bottom: 0」が割り当てられています。スティッキー配置の定義によれば、要素はフロー ルート内のしきい値に達すると固定されます。ただし、この例では、親ブロックのマージントップが大きいため、「move」要素は表示されません。

スクロールが発生すると、親ブロックは「move」要素のしきい値を超えて、修理済み。ただし、親ブロックが画面外に隠れているため、「移動」要素も非表示になります。意図した動作を観察するには、親ブロックのマージン上部を増やして、親ブロックを画面外に押し出します。

したがって、固定配置による「bottom: 0」設定は機能しますが、その下に十分なスペースが必要です。含まれているブロックを調べて、下端に固定されたままの要素を観察します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。