<分区>
html - 溢出隐藏不隐藏子元素
标签 html css css-position
我有一个难题。我进行了一些研究，但在堆栈溢出和其他资源方面都一无所获。
我是专业 html 开发的新手，遇到了 overflow hidden 内容的奇怪问题。我已将问题简化为最基本的部分，没有 js、样式表或自定义元素。只是重现问题的纯可读 HTML。
<html>
<body style="background-color:yellow;display: flex;">
<div id="grey" style="overflow:hidden; background-color:grey">
<div id="blue" style="width:3036px; height:4048px; position:relative; min-width:30px; background-color:blueviolet"></div>
<div id="red-parent" style="position: absolute; left:-276px; top:-457px; width:3036px; height:4048px;">
<div id="red" style="width:17.0753%; height:3.0736%; left:19.2951%; top:25.3572%; position:absolute; background-color:red;"></div>
</div>
</div>
<div id="filler" class="fill-height" style="min-width: 100;"></div>
</body>
</html> 
我的印象是 overflow:hidden 应该隐藏绝对定位的溢出元素以及任何东西。
从这个结果来看，它似乎隐藏了蓝色的溢出，但没有隐藏红色父级的溢出! red-parent 是透明的，使问题更容易查看，但 red-parent 没有被隐藏。它的 child 也不是。这对我来说似乎是错误的。
谁能给我解释一下为什么红色部分没有被隐藏，我该如何补救？
附言这发生在 firefox、opera 和 chrome 中，但如果这对您的解决方案很重要，我正在专门为 chromium 浏览器(electron)开发。
最佳答案
position: absolute 是相对于包含 block (它是一个父 block ，具有除静态之外的任何位置)设置的。
如果您将代码更改为这样，它可以正常工作:
<html>
<body style="background-color:yellow;display: flex;">
<div id="grey" style="overflow:hidden; background-color:grey;position: relative;">
<div id="blue" style="width:3036px; height:4048px; position:relative; min-width:30px; background-color:blueviolet"></div>
<div id="red-parent" style="position: absolute; left:-276px; top:-457px; width:3036px; height:4048px;">
<div id="red" style="width:17.0753%; height:3.0736%; left:19.2951%; top:25.3572%; position:absolute; background-color:red;"></div>
</div>
</div>
<div id="filler" class="fill-height" style="min-width: 100;"></div>
</body>
</html>关于html - 溢出隐藏不隐藏子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58722390/