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

Question

我试图让一个绝对定位的伪元素出现在下面的元素（不是父元素）下面。但是，将 z-index 更改为负数没有任何作用。

这是js fiddle:

#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: "1C";
}

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

Answer 1

你还需要在#containerB中添加position: relative才能使z-index生效。

#containerA {
 position: relative;
 z-index: 4;
}
#containerB {
 /* Added*/
 position: relative;
 z-index: 100;
}

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

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

Answer 2

#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: "1C";
}

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

.quote {
 z-index: 1;
}

.quote-marks {
 z-index: -1;
}

<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>

将负数 z-index 赋给您想要隐藏的 div，将正数赋给您想要展示的 div。希望对你有帮助

Answer 3

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

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

Answer 4

z-layers 当所有 absolute 标签和 pseudo-elements 都是 relative 父标签中的同级标签时最有效。为了显示任何具有负 z-index 值的标签，您必须删除或降低任何具有更高 z-index 的重叠元素的背景不透明度。顺便说一句，我使用了语义标签（div 是个例外），它不仅看起来更好——它也有助于提高可读性。

:root {
  font: 700 3vw/1.5 Raleway
}

article {
  position: relative;
  padding: 25% 0;
}

blockquote {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-style: oblique;
  color: #000;
  padding: 1rem;
  height: 100%;
}

.left {
  position: absolute;
  top: 5%;
  z-index: -1;
  color: yellow;
  background-color: red;
  opacity: 0.4;
  height: 100%;
  padding: 0 3rem 2rem 1rem;
}

.left::before {
  position: absolute;
  top: -15%;
  left: -10%;
  font-size: 12rem;
  content: "1C";
  vertical-align: top;
}

cite {
  float: right;
  margin: -1rem 1rem 0 0
}

<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<article>
  <div class='left'></div>
  <blockquote>
<p><q>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.</q></p>
    <cite>Author, <b>Work</b></cite>
  </blockquote>
</article>

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

z-index not work on pseudo element in relation to following element

css

z-index

pseudo-element