Question

我有一个难题。我进行了一些研究，在堆栈溢出和其他资源方面都显得空白。

我是专业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应该隐藏绝对定位以及所有内容的溢出元素。

从此结果来看，它似乎隐藏了蓝色的溢出，但没有隐藏红父母的溢出！红父母是透明的，使问题更易于查看，但红父母没有被隐藏。它的孩子也不是。对我来说这似乎是错误的。

任何人都可以向我解释为什么隐藏红色部分的原因以及我该如何解决？

P.S。这在Firefox，Opera和chrome中都会发生，但是如果您的解决方案很重要，我将专门为Chrome浏览器（电子）进行开发。

Answer 1

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>

Answer 2

尝试添加一些特定的宽度和位置：id =“ grey”中的绝对值。它肯定会工作。

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

</div>

输出

溢出隐藏不隐藏子元素

2 个答案: