溢出隐藏不隐藏子元素[重复]答案

【问题标题】：Overflow Hidden not hiding child Element [duplicate]溢出隐藏不隐藏子元素[重复]
【发布时间】：2020-03-02 11:29:57
【问题描述】：

我有一个难题。我进行了一些研究，并且在堆栈溢出和其他资源方面都处于空白状态。

我是专业 html 开发的新手，在隐藏溢出内容时遇到了一个奇怪的问题。我已将问题简化为最基本的部分，没有 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 没有被隐藏。它的孩子也不是。这对我来说似乎是错误的。

谁能向我解释为什么红色部分没有被隐藏以及我该如何解决这个问题？

附：这发生在 firefox、opera 和 chrome 中，但如果这对您的解决方案很重要，我正在专门为 chromium 浏览器（电子）开发。

【问题讨论】：

标签： html css css-position

【解决方案1】：

尝试在 id="grey" 中添加一些特定的宽度和位置：absolute。它肯定会起作用。

<div id="grey" style="overflow:hidden;background-color:grey;width: 600px;position: absolute;">

</div>

输出

【讨论】：

谢谢！这行得通，虽然我发现不需要明确设置容器的宽度，只需要位置：相对！

【解决方案2】：

position: absolute 是相对于包含块设置的（它是一个父块，具有除静态之外的任何位置）。

如果您将代码更改为此，它可以正常工作：

<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>

【讨论】：

感谢您解释为什么需要在包含元素上设置位置标签。我完全迷失了，这就是诀窍！谢谢！