css - z-index 不适用于与以下元素相关的伪元素

Question

我正在尝试使绝对定位的伪元素出现在以下元素（而不是父元素）下方。但是，将 z-index 更改为负数没有任何作用。

这是js小提琴：

#containerA {
  position: relative;
  z-index: 4;
}

#containerB {
  z-index: 100;
}

.quote-marks {
  position: absolute;
  z-index: 1;
  font-size: 15em;
  color: yellow;
  background-color: red;
}

.left-quote-marks::before {
  content: "\201C";
}

.authors {
  cursor: pointer;
  font-weight: bold;
}

<section id="containerA">
  <span class="left-quote-marks quote-marks"></span>

  <div id="quote">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


  </div>

  <span class="right-quote-marks quote-marks"></span>

</section>

<section id="containerB">
  <div class="authors"> Author </div>
</section>

标签： cssz-indexpseudo-element

Answer 1

#quote {
 z-index: 2;
 position: relative;
}

只需添加 z-index 和 position: relative 即可解决问题。