新標題：我的觀點是：當使用flexbox時，黏性元素的黏性特性不會被保留
P粉356128676
2023-08-21 23:28:29
<p>我在這個問題上卡了一會兒，想分享這個 <code>position: sticky</code> flexbox 的問題：</p>
<p>我的黏性div在切換到flexbox容器視圖後，突然在被包裹在flexbox父元素中時不再黏性。 </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.flexbox-wrapper {
display: flex;
height: 600px;
}
.regular {
background-color: blue;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: red;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="flexbox-wrapper">
<div class="regular">
這是一個普通的盒子
</div>
<div class="sticky">
這是一個黏性的盒子
</div>
</div></pre>
<p><br /></p>
<p>JSFiddle顯示問題</p>
在我的情況下，一個父容器套用了
overflow-x: hidden;這個樣式，這會破壞position: sticky的功能。你需要移除這個規則。沒有任何父元素應該應用上述的CSS規則。這個條件適用於所有父元素，直到（但不包括）'body'元素。
由於彈性盒子元素預設為
stretch，所有元素的高度都相同，無法進行捲動。將
align-self: flex-start加入到黏性元素中，將高度設為自動，從而實現了滾動並固定。目前，這在所有主要瀏覽器中都得到了支持，但Safari仍需要使用
-webkit-前綴，而除了Firefox之外的其他瀏覽器在使用position: sticky的表格時存在一些問題。.flexbox-wrapper { display: flex; overflow: auto; height: 200px; /* 不是必需的 -- 仅作为示例 */ } .regular { background-color: blue; /* 不是必需的 -- 仅作为示例 */ height: 600px; /* 不是必需的 -- 仅作为示例 */ } .sticky { position: -webkit-sticky; /* 适用于Safari */ position: sticky; top: 0; align-self: flex-start; /* <-- 这是修复的地方 */ background-color: red; /* 不是必需的 -- 仅作为示例 */ }<div class="flexbox-wrapper"> <div class="regular"> 这是普通的盒子 </div> <div class="sticky"> 这是粘性的盒子 </div> </div>