しばらくこの問題で行き詰まっていたので、この position:sticky flexbox issue:
スティッキー div は、フレックスボックス コンテナ ビューに切り替えた後、フレックスボックスの親要素でラップすると突然スティッキーでなくなりました。
.flexbox-wrapper { ディスプレイ: フレックス; 高さ: 600ピクセル; } 。通常 { 背景色: 青; } .sticky { 位置: -webkit-sticky; 位置: スティッキー; トップ: 0; 背景色: 赤; } こちらは普通の箱ですこれは粘着ボックスです
JSFiddle の表示の問題
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私の場合、親コンテナに
overflow-x: hidden;スタイルが適用されていたため、position: Stickyの機能が壊れてしまいます。このルールを削除する必要があります。親要素には上記の CSS ルールを適用しないでください。この条件は、「body」要素までのすべての親要素 (ただし、「body」要素は含まない) に適用されます。
フレックスボックス要素のデフォルトは
stretchであるため、すべての要素は同じ高さになり、スクロールできません。align-self: flex-startをスティッキー要素に追加し、高さを自動に設定することで、スクロールと固定を実現します。現在、これはすべての主要なブラウザでサポートされていますが、Safari では引き続き
-webkit-プレフィックスが必要ですが、Firefox を除く他のブラウザではposition:sticky が使用されます。にはいくつかの問題があります。形状。