时间戳

首页 > 解决方案 > 溢出隐藏不隐藏子元素

html - 溢出隐藏不隐藏子元素

问题描述

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

我是专业 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 没有被隐藏。它的孩子也不是。这对我来说似乎是错误的。

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

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

标签： htmlcsscss-position

解决方案

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>

推荐阅读