新しいタイトル: 私のポイントは、フレックスボックスを使用する場合、スティッキー要素のスティッキー プロパティは保持されないということです。
P粉356128676
2023-08-21 23:28:29
<p>しばらくこの問題で行き詰まっていたので、この <code>position:sticky</code> flexbox issue:</p> を共有したいと思いました。
<p>スティッキー div は、フレックスボックス コンテナ ビューに切り替えた後、フレックスボックスの親要素でラップすると突然スティッキーでなくなりました。 </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.flexbox-wrapper {
ディスプレイ: フレックス;
高さ: 600ピクセル;
}
。通常 {
背景色: 青;
}
.sticky {
位置: -webkit-sticky;
位置: スティッキー;
トップ: 0;
背景色: 赤;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="flexbox-wrapper">
<div class="レギュラー">
こちらは普通の箱です
</div>
<div class="スティッキー">
これは粘着ボックスです
</div>
</div></pre>
<p><br /></p>
<p>JSFiddle の表示の問題</p>
私の場合、親コンテナに
overflow-x: hidden;
スタイルが適用されていたため、position: Sticky
の機能が壊れてしまいます。このルールを削除する必要があります。親要素には上記の CSS ルールを適用しないでください。この条件は、「body」要素までのすべての親要素 (ただし、「body」要素は含まない) に適用されます。
フレックスボックス要素のデフォルトは
stretch
であるため、すべての要素は同じ高さになり、スクロールできません。align-self: flex-start
をスティッキー要素に追加し、高さを自動に設定することで、スクロールと固定を実現します。現在、これはすべての主要なブラウザでサポートされていますが、Safari では引き続き
-webkit-
プレフィックスが必要ですが、Firefox を除く他のブラウザではposition:sticky が使用されます。
にはいくつかの問題があります。形状。