位置粘性和溢出：隐藏

【问题标题】：Position sticky and overflow:hidden位置粘性和溢出：隐藏
【发布时间】：2026-01-12 02:05:01
【问题描述】：

在具有溢出：隐藏的容器内时，位置粘性不起作用。但是需要隐藏溢出！

 <div class="lg:col-start-7 lg:col-end-13" style="overflow:hidden">
     <div style="min-height:100%;">
      <div class="bg-placeholder-bg w-full" style="position:relative">
          <img src="image:src" style="position: sticky;top: 10px;">
      </div>
     </div>
 </div>

编辑：好的，我刚刚意识到这一切都被包装在一个容器中，该容器具有并且需要溢出：隐藏，因此它为什么不起作用！有什么想法吗？

【问题讨论】：

请发布一个工作示例，阅读minimal reproducible example
给具有 col 类的父容器一个固定的高度，看看会发生什么。 min:height 是一个相对高度，问题是它与什么相关？父高度和父高度也是自动的。
我能找到的唯一解决方案是删除溢出：隐藏！

标签： html css image overflow sticky

【解决方案1】：

你可以这样继续：

#mainContent{
height:400vh;
width:100vw;
background-color:blue
overflow:hidden;
}
.container{
height:50vh;
background-color:red;
position:absolute
top:0;
left:0;
}
.bgContainer{
height:10vh;
width:100vw;
  position: -webkit-sticky;
  position: sticky;
  top:0;
}
.imgSticky{
height:100%;
width:100%;
background-image: url("https://cdn.shopify.com/s/files/1/0326/7189/t/65/assets/pf-e820b2e0--mother-tree-forest.jpg?v=1619557558");

  }

<div id="mainContent">

 <div>
 <div class="container">
      <div class="bgContainer">
         <div class="imgSticky"></div>
    
     </div>
 </div>

【讨论】：

见以上更新！这是因为它在一个带有溢出的容器中：隐藏；
在这种情况下，您可能想看看这里：link
我没有看到我的问题的答案 ^
我用我看到的唯一解决方案编辑了我的答案，将主要内容与你想要的类似标题的组件分离。