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

Question

I am trying to make an absolute positioned psuedo element appear underneath the following element (not the parent). However, changing the z-index to negative does nothing.

Here is the 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: "\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>

Changing the `z-index` of `.quote-marks` to `-1` correctly positions your quotation marks behind the text. Is this not what you want? — Obsidian Age, Jul 23 '19 at 01:55

score 2 · Accepted Answer · answered Jul 23 '19 at 05:41

2

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

Just add z-index with position: relative to fix the issue.

answered Jul 23 '19 at 05:41

Umapathi

116
10

score 1 · Answer 2 · answered Jul 23 '19 at 03:29

You need to add position: relative to #containerB as well to make the z-index take effects.

#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: '\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>

score 0 · Answer 3 · answered Jul 23 '19 at 03:29

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

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

Give negative z-index to the div that you want to put behind and positive to the one that you wanted to show. Hope it'd help

score 0 · Answer 4 · answered Jul 23 '19 at 06:45

z-layers are most effective when all of the absolute tags and pseudo-elements are siblings inside a relative parent. In order to show any tag that has a negative z-index value you must remove or decrease the opacity of the background of any overlapping element with a higher z-index. BTW I used semantic tags (a div being the exception), not only does it look better -- it helps in readability as well.

: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: "\201C";
  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 not work on pseudo element in relation to following element

4 Answers4