为什么position:sticky在父容器上没有溢出的情况下不起作用？

Question

我正在尝试使用position:sticky创建一个粘性侧边栏，但它的行为不符合预期。即使我设置了正确的顶部值，当我滚动页面时，侧边栏也不会粘住。 这是我的代码：

<div class="wrapper">  
  <div class="sidebar">Sticky Sidebar</div>  
  <div class="content">  
    <p>Lots of content here...</p>  
    <p>Lots more content...</p>  
  </div>  
</div>    

.wrapper {  
  display: flex;  
}  

.sidebar {  
  position: sticky;  
  top: 10px;  
  width: 200px;  
  background-color: #f8f9fa;  
  padding: 20px;  
}  

.content {  
  flex-grow: 1;  
  padding: 20px;  
}  

滚动页面时不会激活粘性行为。我希望当我向下滚动内容时侧边栏保持粘性。

1. 我尝试在父 .wrapper 上设置position:relative，但是它 没有帮助。
2. 我希望在滚动时，position: Sticky 元素保持固定在距视口顶部 10px 的位置。
3. 我向粘性元素添加了 z-index，但这并没有解决问题。

为什么位置：粘性在这里不起作用，如何在不添加溢出的情况下修复它？

Answer 1

出现此问题的原因是position：sticky仅适用于最近的可滚动祖先。在您的情况下， .container 元素是可滚动祖先，并且粘性标头在离开容器边界时不再具有粘性。

要解决此问题，请确保粘性元素的父级没有冲突的样式，例如溢出：隐藏。这是更正后的 CSS：

.container {  
  width: 100%;  
  height: 300px;  
  overflow-y: auto; /* Ensure vertical scrolling only */  
  position: relative; /* Required for sticky positioning */  
  border: 1px solid #ccc;  
}  

此外，请确保 .sticky-header 元素不超过容器的宽度或高度。