相对一个绝对定位元素的背景样式

Question

在创建包含动画的页面时出现一般性CSS问题。我有一个主要容器，它位于相对位置，并且多个容器绝对位于其中，以便更改整个页面的颜色等背景样式并将其移动以通过z-index显示其下的其他不同颜色的容器

为什么背景颜色不显示？

.main {
  position: relative;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.green {
  background: green;
  z-index: 5;
  left: 50%;
}

.blue {
  background: blue;
  z-index: 4;
}

<div class="main">
  <div class="bg green">green</div>
  <div class="bg blue">blue</div>
</div>

Answer 1

当您将某个内容定位为absolute时，它会从文档流中删除。这意味着现在main无法为其提供任何高度（因为默认值为auto），因此孩子的height: 100%仍为0。该文字仍然可见，因为overflow-y的默认设置为visible。

要解决此问题，请将main置于某个高度。

body, html, .main { height: 100% }
.main {
  position: relative;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.green {
  background: green;
  z-index: 5;
  left: 50%;
}

.blue {
  background: blue;
  z-index: 4;
}

<div class="main">
  <div class="bg green">green</div>
  <div class="bg blue">blue</div>
</div>