我被这个问题困住了一会儿，我想我可以分享一下这个位置: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'元素之前的所有父元素。
其他回答
对于我的情况，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-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 >
我做了一个临时的折叠桌，但遇到了这个问题。为了解决这个问题，我简单地把粘性标题行放在flexbox的外面，就在它之前。
在我的例子中，其中一个父容器有overflow-x: hidden;应用于它，将打破位置:粘性功能。您需要删除该规则。
任何父元素都不应该应用上述CSS规则。这个条件适用于'body'元素之前的所有父元素。
你也可以尝试在flex项目中添加一个子div，并分配位置:sticky;上图:0;到那一步。
这适用于我的两列布局，其中第一列的内容需要保持粘性，第二列显示可滚动。
