我被这个问题困住了一会儿，我想我可以分享一下这个位置: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
当前回答
从我的经验来看，全局解决方案/规则:
不要将含有粘性元素的结构直接放在{display: flex}容器中。
相反(对于flex布局)将带有粘性元素的table /div放在flex子容器中(例如，使用{flex: 11 1 auto}，但没有{display: flex})，那么一切都应该按预期工作。
其他回答
如果你在父元素中使用flex，请使用align-self: flex-start用于你想要设置为sticky的元素。
position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;
确保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 >
从我的经验来看，全局解决方案/规则:
不要将含有粘性元素的结构直接放在{display: flex}容器中。
相反(对于flex布局)将带有粘性元素的table /div放在flex子容器中(例如，使用{flex: 11 1 auto}，但没有{display: flex})，那么一切都应该按预期工作。
对于我的情况，align-self: flex-start(或justify-self: flex-start)解决方案不起作用。我需要保持overflow-x:隐藏以及因为一些容器横向滑动。
我的解决方案需要嵌套display: flex与overflow-y: auto来获得所需的行为:
header can adjust height dynamically, which prevents playing with position: absolute or position: fixed content scrolls vertically, constrained horizontally to the view width sticky element can be anywhere vertically, sticking to the bottom of the header other elements can slide horizontally looks like the SO snippet tool can't render width on child elements to properly to demonstrate the horizontal slide, or maybe there's some other setting on my actual layout that makes it work... note that a wrapper element that does nothing else is required to allow overflow-x: auto to work correctly in elements under a parent with overflow-x: hidden
body { height: 100vh; width: 100vw; display: flex; flex-direction: column; } body>header { background-color: red; color: white; padding: 1em; } .content { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; } article { position: relative; display: flex; flex-direction: column; overflow-y: auto; } .horizontal_slide { display: flex; overflow-x: auto; background-color: lightblue; padding: .5em; } .horizontal_slide>* { width: 1000px; } .toolbar { position: sticky; top: 0; z-index: 10; background-color: lightgray; padding: .5em; display: flex; } <header>Fancy header with height adjusting to variable content</header> <div class="content"> <article class="card"> <h1>One of several cards that flips visibility</h1> <div class="overflow_x_wrapper"> <div class="horizontal_slide"> <div>Reason why `overflow-x: hidden` on the parent is required </div> <div>Reason why `overflow-x: hidden` on the parent is required </div> <div>Reason why `overflow-x: hidden` on the parent is required </div> </div> <div class="toolbar">Sticky toolbar part-way down the content</div> <p>Rest of vertically scrollable container with variable number of child containers and other elements</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </div>
你也可以尝试在flex项目中添加一个子div，并分配位置:sticky;上图:0;到那一步。
这适用于我的两列布局，其中第一列的内容需要保持粘性，第二列显示可滚动。
