嵌套DOM结构中孙元素能否覆盖父元素的overflow:hidden属性？

你的需求完全可以实现，核心是让孙元素脱离父元素的裁剪上下文，同时通过JS同步它与子元素的位置关系，以下是具体实现方案：

核心思路 #

父元素的overflow:hidden会裁剪其包含块内的所有后代元素，所以要让孙元素突破限制，必须让它脱离父元素的裁剪上下文（比如使用固定定位），同时通过动态计算保持它与子元素的相对位置，样式继承则通过CSS的inherit或变量实现。

实现代码 #

HTML结构（保持原结构） #

<div id="parent">
    <div id="child">        
        <div id="grandchild">
            孙元素内容
        </div>  
    </div>
</div>

CSS样式 #

#parent {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
}

#child {
  width: 500px;
  height: 500px;
  background: rgba(0, 0, 255, 0.3); /* 蓝色半透明，被父元素裁剪 */
  font-size: 16px;
  font-family: Arial, sans-serif;
  position: relative;
}

#grandchild {
  width: 200px;
  height: 200px;
  background: rgba(0, 255, 0, 0.3); /* 绿色半透明，不受裁剪 */
  /* 脱离父元素的裁剪上下文 */
  position: fixed;
  /* 继承子元素的字体样式 */
  font-size: inherit;
  font-family: inherit;
}

JS同步位置 #

const parent = document.getElementById('parent');
const child = document.getElementById('child');
const grandchild = document.getElementById('grandchild');

// 更新孙元素位置，使其与子元素左上角对齐
function syncGrandchildPos() {
  const childViewportRect = child.getBoundingClientRect();
  grandchild.style.top = `${childViewportRect.top}px`;
  grandchild.style.left = `${childViewportRect.left}px`;
}

// 初始化位置
syncGrandchildPos();
// 父元素滚动时同步位置
parent.addEventListener('scroll', syncGrandchildPos);
// 窗口大小变化时重新计算
window.addEventListener('resize', syncGrandchildPos);

方案符合所有需求的验证 #

• 孙元素位置相对于子元素：通过getBoundingClientRect()实时获取子元素的视口位置，同步给孙元素，视觉上始终保持相对子元素的定位。
• 子元素随父元素滚动移动：子元素处于父元素的滚动容器内，受overflow:hidden裁剪，滚动父元素时子元素正常跟随移动。
• 孙元素继承子元素样式：通过font-size: inherit和font-family: inherit直接继承子元素的字体样式，也可以用CSS变量实现更复杂的样式继承。
• 子元素被裁剪、孙元素完全可见：孙元素使用position: fixed，其包含块是浏览器视口，不受父元素overflow:hidden的裁剪限制，因此可以完全显示；子元素则被父元素正常裁剪。

补充说明 #

如果不想使用JS，目前没有纯CSS方案能完全满足所有需求——因为纯CSS无法在孙元素脱离裁剪上下文的同时，动态同步它与滚动中子元素的位置关系。上述JS方案是最可靠的实现方式。

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