ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 Sticky が有効にならない場合の対処方法

CSS3 Sticky が有効にならない場合の対処方法

藏色散人
藏色散人オリジナル
2020-12-11 09:12:297405ブラウズ

css3 スティッキー ソリューションが有効にならない: 1. 親要素に overflow:hidden または overflow:auto 属性を含めることはできません; 2. top、bottom、left、right の 4 つの値のいずれか必ず指定してください; 3. 親要素の高さ スティッキー要素の高さより低くすることはできません。

CSS3 Sticky が有効にならない場合の対処方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、thinkpad t480 コンピューター。

推奨事項: 「css ビデオ チュートリアル

sticky は次の理由により有効になりません:

  • parent 要素が overflow:hidden または overflow:auto で設定されている

  • #top、right、bottom、left の 4 つの値がいずれも指定されていません

  • 親要素の高さは、スティッキー配置された要素の高さよりも小さいです。

  • スティッキー属性は、ユーザーのスクロール、切り替えに依存します。位置:相対位置と位置:固定位置の間。

  • 要素の配置は、特定のしきい値を超える前は相対配置であり、それ以降は固定配置です。

sticky 属性は、次の条件が満たされる場合にのみ有効です:

  • 親要素はオーバーフローできません。 hidden または overflow:auto 属性

  • top、bottom、left、right の 4 つの値のいずれかを指定する必要があります。それ以外の場合は相対値のみになります。位置

  • 親要素の高さをスティッキー要素の高さより低くすることはできません

以上がCSS3 Sticky が有効にならない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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