我被这个问题困住了一会儿，我想我可以分享一下这个位置:sticky + flexbox gotcha:
我的粘性div工作良好，直到我切换到flexbox容器的视图，突然div不粘时，它被包装在一个flexbox父。
.flexbox-wrapper { 显示:flex; 身高:600 px; ｝ .regular { 背景颜色:蓝色; ｝ .sticky { 位置:-webkit-sticky; 位置:粘性; 上图:0; 背景颜色:红色; ｝ < div class = " flexbox-wrapper”> < div class = "常规" > 这是普通的盒子 < / div > < div class = "粘" > 这是一个粘盒子 < / div > < / div >
显示问题的JSFiddle
当前回答
在我的例子中，其中一个父容器有overflow-x: hidden;应用于它，将打破位置:粘性功能。您需要删除该规则。
任何父元素都不应该应用上述CSS规则。这个条件适用于'body'元素之前的所有父元素。
其他回答
从我的经验来看，全局解决方案/规则:
不要将含有粘性元素的结构直接放在{display: flex}容器中。
相反(对于flex布局)将带有粘性元素的table /div放在flex子容器中(例如，使用{flex: 11 1 auto}，但没有{display: flex})，那么一切都应该按预期工作。
确保flex-wrapper已经分配了高度，并将溢出值设置为auto。 然后将“align-self: flex-start;”添加到粘滞元素。
.flexbox-wrapper { 显示:flex; 身高:600 px;//<-必要的，并且不分配% 溢出:汽车;/ / <修复 ｝ .regular { 背景颜色:蓝色; ｝ .sticky { 位置:-webkit-sticky; 位置:粘性; 上图:0; 背景颜色:红色; align-self: flex-start;/ / <修复 ｝ < div class = " flexbox-wrapper”> < div class = "常规" > 这是普通的盒子 < / div > < div class = "粘" > 这是一个粘盒子 < / div > < / div >
你也可以尝试在flex项目中添加一个子div，并分配位置:sticky;上图:0;到那一步。
这适用于我的两列布局，其中第一列的内容需要保持粘性，第二列显示可滚动。
我做了一个临时的折叠桌，但遇到了这个问题。为了解决这个问题，我简单地把粘性标题行放在flexbox的外面，就在它之前。
在我的例子中，其中一个父容器有overflow-x: hidden;应用于它，将打破位置:粘性功能。您需要删除该规则。
任何父元素都不应该应用上述CSS规则。这个条件适用于'body'元素之前的所有父元素。
