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

Question

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

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

  .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; } 

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

Answer 1

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

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