如何设置指定祖先元素不裁剪特定子元素？（含HTML/CSS场景）

这问题我踩过坑，核心逻辑得先搞懂：overflow:hidden只会裁剪「属于当前容器包含块」的元素——简单说，就是那些以该容器为定位上下文的绝对定位元素，或者正常流里超出容器范围的元素。你的结构里，.container是设置了overflow:hidden的相对定位容器，而#banner-message和#el都是绝对定位，默认情况下它们的定位上下文都会落到最近的非static祖先（也就是.container），所以哪怕#el嵌套在#banner-message里，最终还是会被.container裁剪。

要让#el跳出裁剪，关键是把它的定位上下文切换到没有设置overflow裁剪的祖先（也就是.main），这样.container的overflow:hidden就管不到它了。

具体实现方案 #

先看修改后的完整代码：

HTML（结构不变） #

<div class="main"> 
  <div class="container"> 
    <div id="banner-message"> 
      <p>I want to be hidden</p> 
      <p id="el">I want to be visible</p> 
    </div> 
  </div> 
</div>

CSS（核心修改点标注） #

.main {
  position: relative; /* 保留，作为#el的定位上下文 */
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden; /* 保留，裁剪其他溢出元素 */
  border: 1px solid red;
}

#banner-message {
  position: absolute; /* 保留，它的定位上下文是.container，会被裁剪 */
  top: 0;
  left: 0;
  width: 400px; /* 超出.container宽度，会被裁剪 */
  height: 400px;
  background: #eee;
}

#el {
  position: absolute;
  /* 关键：让#el的定位上下文变成.main，而非#banner-message/.container */
  /* 通过设置相对于.main的偏移来定位 */
  top: 50px;
  left: 350px; /* 这个位置超出.container范围，但不会被裁剪 */
  background: yellow;
  padding: 10px;
  /* 强制脱离#banner-message的定位上下文：给#el设置独立的定位基准 */
}

为什么这个方案有效？ #

• 当绝对定位元素的最近非static祖先是.main（而非.container或#banner-message）时，它的包含块就变成了.main，.container的overflow:hidden只会裁剪属于自己包含块的元素（也就是#banner-message和里面的第一个<p>），对#el完全无效。

备选方案（如果#banner-message必须保留定位上下文） #

如果#banner-message不能修改定位属性，你可以给#el添加position: absolute后，用inset或者top/left直接基于.main定位，同时确保#el的显示优先级：

#el {
  position: absolute;
  top: 50px;
  left: calc(100% + 50px); /* 基于.main的宽度计算偏移 */
  z-index: 999; /* 确保显示在最上层 */
}

内容的提问来源于stack exchange，提问作者dazzed