作者：云崽美不美_525 | 来源：互联网 | 2023-02-01 17:54
我被困在这一点上,并认为我会分享这个position: sticky+弹性盒子的问题:
我的粘性div工作正常,直到我将视图切换到弹性盒容器,并且当它被包装在弹性盒父中时突然div不粘.
.flexbox-wrapper {
display: flex;
height: 600px;
}
.regular {
background-color: blue;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: red;
}
This is the regular box
This is the sticky box
JSFiddle显示问题
1> BHOLT..：
由于弹性框元素默认为stretch,所有元素都是相同的高度,无法滚动.
添加align-self: flex-start到sticky元素将高度设置为auto,允许滚动并修复它.
目前仅在Safari和Edge中支持此功能
.flexbox-wrapper {
display: flex;
overflow: auto;
height: 200px; /* Not necessary -- for example only */
}
.regular {
background-color: blue; /* Not necessary -- for example only */
height: 600px; /* Not necessary -- for example only */
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
align-self: flex-start; /* <-- this is the fix */
background-color: red; /* Not necessary -- for example only */
}
This is the regular box
This is the sticky box
京公网安备 11010802041100号