据我所知,sticky position在离开框架之前会粘附在其容器上。
我的问题是我有一些嵌套的容器和一个内部的粘性元素,并希望它粘附在其祖父容器上。
有人可能建议将内部的粘性子元素冒泡,但问题是它必须保留在其父容器内,因为父容器是包含两个元素的 flexbox,而我希望其中一个元素保持粘性,同时允许另一个元素在溢出时滚动消失。
以下是一个示例html:
假设
我的问题是我有一些嵌套的容器和一个内部的粘性元素,并希望它粘附在其祖父容器上。
有人可能建议将内部的粘性子元素冒泡,但问题是它必须保留在其父容器内,因为父容器是包含两个元素的 flexbox,而我希望其中一个元素保持粘性,同时允许另一个元素在溢出时滚动消失。
以下是一个示例html:
<div class="main-container">
<div class="inner-container">
<div class="sticky">sticky child</div>
<div class="non-sticky">non-sticky child</div>
</div>
</div>
并且样式:
.inner-container {
display: flex;
flex-direction: row;
}
.sticky {
position: sticky;
top: 0;
}
假设
main-container
是可滚动的,而inner-container
正在其中滚动。
我知道CSS并没有提供明确的解决方案,问题是是否有任何技巧来处理它。