我被这个问题困住了一会儿，我想我可以分享一下这个位置: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
当前回答
由于flex box元素默认为拉伸，因此所有元素的高度都相同，不能滚动。
添加align-self: flex-start到sticky元素，设置高度为auto，允许滚动，并修复它。
目前，所有主流浏览器都支持这个功能，但Safari仍然落后于-webkit-前缀，而除了Firefox之外的其他浏览器在位置方面存在一些问题:粘表。
.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; /* for Safari */ position: sticky; top: 0; align-self: flex-start; /* <-- this is the fix */ background-color: red; /* Not necessary -- for example only */ } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div>
显示解决方案的JSFiddle
其他回答
由于flex box元素默认为拉伸，因此所有元素的高度都相同，不能滚动。
添加align-self: flex-start到sticky元素，设置高度为auto，允许滚动，并修复它。
目前，所有主流浏览器都支持这个功能，但Safari仍然落后于-webkit-前缀，而除了Firefox之外的其他浏览器在位置方面存在一些问题:粘表。
.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; /* for Safari */ position: sticky; top: 0; align-self: flex-start; /* <-- this is the fix */ background-color: red; /* Not necessary -- for example only */ } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div>
显示解决方案的JSFiddle
你也可以尝试在flex项目中添加一个子div，并分配位置:sticky;上图:0;到那一步。
这适用于我的两列布局，其中第一列的内容需要保持粘性，第二列显示可滚动。
我做了一个临时的折叠桌，但遇到了这个问题。为了解决这个问题，我简单地把粘性标题行放在flexbox的外面，就在它之前。
对于我的情况，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，请使用align-self: flex-start用于你想要设置为sticky的元素。
position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;
