当我们将其高度设置为零时，如何使绝对定位元素的子元素消失？

Question

我体内有 div 和 class 个 'box'。 div 包含另一个 div，class 为 'box-inside'。我已经在 'box' 上设置了绝对位置并将所有插入属性设置为零以使其跨越整个主体宽度。现在，我将它的高度设置为零，但它里面的盒子并没有消失，它还在原处。如何让内框在高度为零的情况下消失？

.box {

  background: black;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 0;
}
.box .box-inside {
  padding: 2em;
  background: #f4f4;
}

更改“.box”的高度以获得清晰的概念。这是 Codepen 上的 link：https://codepen.io/aqib-ali-01/pen/ZEyEWKE?editors=0100

Answer 1

使用CSS属性overflow。这个属性被放置在一个容器元素上（在你的例子中是 div 和 box 的 class）并且它控制太大而不适合的内容的行为在容器中。

要隐藏溢出父项的所有内容，请使用 overflow: hidden。您的 CSS 将如下所示。

.box {

  background: black;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 0;
  overflow: hidden;
}
.box .box-inside {
  padding: 2em;
  background: #f4f4;
}

当我们将其高度设置为零时，如何使绝对定位元素的子元素消失？

How make children of absolutely positioned element disappear, when we set its height to zero?

html

css

css-position

absolute