Question

我在容器div上实现 :: after 伪元素。伪元素设置背景颜色，顶部0，左侧0,100％宽度和高度。在div内部，高度设置为200px。此HTML / CSS组合导致背景颜色覆盖整个嵌套的div，并指定添加的高度和宽度。

但是，如果我删除 :: after ，则插入背景颜色，但不在嵌套div的顶部，这似乎完全违反直觉。为什么在覆盖嵌套div的内容中使用 :: after （或 :: before ）伪元素结果，而不使用它会导致嵌套div继续叠加层的顶部？不应该在内容之后意味着什么？

＆＃13;

 .container1 {
    position:relative;
    height: 100%;
}

.overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsla(211, 100%, 18%,.6);
  z-index: 2;
  width: 100%;
  height: 100%;
}

#hero {
   height: 200px;
   background: url(https://preview.ibb.co/nRxrBS/hero_truck_lg.jpg) no-repeat;
}

＆＃13;

<div class="container1 overlay">
    <div id="hero"></div>
</div>

＆＃13;

Answer 1

你有几个项目相互干扰。但我认为你的主要问题是：

position:absolute;从渲染顺序中拉出元素，使它们在静态元素之上渲染。

：之前和之后：伪元素表现出令人困惑的行为

1 个答案: