新しいタイトル: 私のポイントは、フレックスボックスを使用する場合、スティッキー要素のスティッキー プロパティは保持されないということです。
P粉356128676
P粉356128676 2023-08-21 23:28:29
0
2
545
<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>
P粉356128676
P粉356128676

全員に返信(2)
P粉239164234

私の場合、親コンテナに overflow-x: hidden; スタイルが適用されていたため、position: Sticky の機能が壊れてしまいます。このルールを削除する必要があります。

親要素には上記の CSS ルールを適用しないでください。この条件は、「body」要素までのすべての親要素 (ただし、「body」要素は含まない) に適用されます。

いいねを押す +0
P粉311423594

フレックスボックス要素のデフォルトは stretch であるため、すべての要素は同じ高さになり、スクロールできません。

align-self: flex-start をスティッキー要素に追加し、高さを自動に設定することで、スクロールと固定を実現します。

現在、これはすべての主要なブラウザでサポートされていますが、Safari では引き続き -webkit- プレフィックスが必要ですが、Firefox を除く他のブラウザでは position:sticky が使用されます。 にはいくつかの問題があります。形状。

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート