Z-Index Not Working on Pseudo-Element

z-index not working on pseudo-element

The parent element of the :pseudo-element requires a z-index declared as well in order for the z-index of the :pseudo-element to function as intended. But doing so will stack the :pseudo-element over the parent element, concealing the background and nested content.

To rectify this, nested content should have a higher z-index declared. And an additional :pseudo-element (:after) should be declared to overlay the initial :pseudo-element (:before) with the background fill applied (e.g: "white"), to conceal the initial pseudo-element only allowing the overflow to reveal.

.logistic-bg .polkrys_shadow:after { /* Additional pseudo-element added */
   content: ""; 
   background: white; 
   position: absolute; 
   left: 0; 
   right: 0; 
   top: 0; 
   bottom: 0; 
}

.logistic-bg .polkrys_shadow { /* Adjustments made on parent element */
   z-index: 9;
}

.logistic-bg div:first-child { /* Adjustments made on nested element */
   position: relative; /* required for z-index to apply */
   z-index: 99;
}

z-index not working properly with pseudo-element

That is because you have positioned your pseudo-element absolutely in the <a> element, and this causes it to be stacked on top of the text node, which has static positioning.

To solve this issue, simply wrap the inner text with <span> and then add this rule:

.start-coding > span {
  position: relative;
  z-index: 2;
}

Even better: you don't even need to add z-indices to both ::before and the nested <span>, since they come in an order that ensures that, when they are placed in a stacking context, the <span> will always be on top (since it comes after the ::before element in the DOM tree). See example:

.start-coding {
  display: block;
  font-size: 1.3rem;
  color: white;
  background-color: black;
  padding: 0.4rem 1.8rem;
  position: relative;
  z-index: 5;
  border-radius: 5px;
  width: 100%;
}

.start-coding::before {
  content: '';
  background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  border-radius: 5px;
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
}

.start-coding>span {
  position: relative;
}

<a href="#" class="start-coding"><span>Start Coding</span></a>

z-index doesn't work with ::after/::before element?

You can remove z-index from parent element and use negative z-index: -1 on pseudo element. If you want only green line on red line you need to remove white background from parent also DEMO

.or {  border: 2px solid #8fc300;  border-radius: 5px;  color: #333;  font-size: 17px;  font-weight: 600;  height: 34px;  line-height: 26px;  text-align: center;  width: 34px;  margin-top: 64px;  margin-left: 20px;  margin-right: 20px;  background: #fff;  /*For z-index - keep the green area on top*/  position: relative;}.or::after {  background: red;  content: "";  display: block;  height: 116px;  margin-left: 15px;  margin-top: -68px;  width: 4px;  /*For z-index - keep the green area on top*/  position: absolute;  z-index: -1;}

<div class="or"></div>

z-index is not working with pseudo elements

If you add z-index to parent you create new stacking context

Just remove z-index from parent element

UPD

Yes. also I need to add the background for section element

.what_we_do{
  background-color: #fff6f6;
  padding:5rem;
}
.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px
}

.card.active {
  position: relative;
  box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.1);
}

.card.active::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: calc(100% + 5px);
  height: calc(100% + 15px);
  border-radius: 5px;
  background-color: #923929;
  z-index: -1;
  transform: rotateZ(-2deg);
  transform-origin: top left;
}

.cards {
  padding: 5rem;
  display: flex;
  gap: 20rem;
  background-color: #92392920;;
  position: relative;
  z-index: 1;
}

<section class="what_we_do">
<div class="cards">

  <div class="card active">Card</div>
  <div class="card">Card</div>
  <div class="card">Card</div>
</div>
</section>

CSS ::before pseudo-element not respecting z-index stacking context

::after inserts its content immediately before the end of the tag it's applied to but still inside the tag, z-index couldn't be lower than the z-index of the tag, so your approach won't work. But you could do ::after to the parent tag, which in your case has class 'circle'. As the inserted content will be relative to the wrapping tag, you should adjust the position of the contend related to this tag.

See a codepen example:

Codepen Example

See a snippet example here:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.canvas {
    background: #573d0e;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .circle {
    width: 70vmin;
    height: 70vmin;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }

  .circle:after {
      content: '';
      position: absolute;
      z-index: 1;
      width: 15vmin;
      height: 15vmin;
      background: black;
      border-radius: 50%;
      top: 10vmin;
      left: 12vmin;
      box-shadow: 30vmin 0 #000;
    }

.panda {
    position: relative;
    border: 1.5vmin solid black;
    width: 45vmin;
    height: 45vmin;
    border-radius: 50%;
    background: #fff;
    z-index: 2;

  }

  .eyes {
      position: relative;

    > * {
        position: absolute;
        width: 11vmin;
        height: 15vmin;
        background: #000;
        border-radius: 70px / 100px;
        left: 8.7vmin;
        top: 9vmin;
        transform: rotate(12deg);

        &:before,
        &:after {
          content: '';
          position: absolute;
        }

        &:before {
            width: 4vmin;
            height: 6vmin;
            background: white;
            border-radius: 76px / 100px;
            left: 5vmin;
            top: 3.2vmin;
            transform: rotate(348deg);
        }

        &:after {
          width: 2vmin;
          height: 3vmin;
          background: black;
          border-radius: 76px / 100px;
          left: 6.3vmin;
          top: 5vmin;
          transform: rotate(348deg);
        }
    }

    :last-child {
        transform: scale(-1, 1) rotate(12deg);
        left: 22.3vmin;
    }
  }

  .snout {
        position: absolute;
        width: 25vmin;
        height: 18vmin;
        top: 23vmin;
        left: 8.5vmin;
        bottom: 5vmin;
        background: #fff;
        border-radius: 50%;
        border: 1.5vmin solid black;

        &:before {
            content: '';
            position: absolute;
            width: 1.5vmin;
            height: 5vmin;
            left: 10vmin;
            top: 7vmin;
            background: black;
        }
  }

  .nose {
    position: absolute;
    width: 10vmin;
    height: 7vmin;
    left: 5.7vmin;
    top: 0.5vmin;
    background: black;
    border-radius: 50% 50% 48% 52% / 21% 21% 79% 79%;
  }

  .mouth {
        position: absolute;
        width: 9.6vmin;
        height: 5vmin;
        border-radius: 50%;
        border-bottom: 1.5vmin solid black;
        bottom: 1.6vmin;
        left: 6vmin;
  }

    <div class="canvas">
        <div class="circle">
            <div class="panda">
                <div class="eyes">
                    <div></div>
                    <div></div>
                </div>
                <div class="snout">
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
            </div>
        </div>
    </div>

Z-index doesn't work on pseudo element ::after

<div class="wrapper">
</div>
<style>
  body{
    display:grid;
    place-content:center;
    background-color:#191919;
  }
  .wrapper {
    position:relative;
    width: 100px;
    height: 100px;
    border-radius:50%;
    background: #E08027;
    box-shadow: 0 0 0 30px #824B20;
    
    
      
  }
  
 
  .wrapper::before {
    content:'';
    width: 100px;
    height: 50px;
    position:absolute;
    top:20;
    left:-20px;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border: 20px solid #FFF58F;
    border-top:0px;
    z-index:5;
   
}
   
  
  
</style>

z-Index behaviour on pseudo elements

You would have to give pseudo elements a negative z-index to get it to go behind it's parent, plus remove the z-index on the parent.
http://jsfiddle.net/jklm313/Kq2PY/4/

div{
    position:relative;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: -1;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}

<div>erferf</div>

z-index on positioned pseudo element (after) not working

If you remove the transform and z-index from .dad, the red square will be under the green square.

z-index for pseudo element doesn't work

Use z-index in ul instead of li, and make sure that the ul is not position: static;:

ul {  position: relative;  z-index: 900000;}li.breadcr {  width: 2em;  height: 2em;  text-align: center;  line-height: 2em;  border-radius: 1em;  background: #0095c4;  margin: 0 3em;  display: inline-block;  color: white;  position: relative;}li.breadcr::before {  content: '';  position: absolute;  top: .9em;  left: -8em;  width: 10em;  height: .2em;  background: #0095c4;  z-index: -1;}li.breadcr:first-child::before {  display: none;}.active {  background: #0095c4;}.active ~ li.breadcr {  background: #badae4;}.active ~ li.breadcr::before {  background: #badae4;}ul.sub {  list-style: none;}li.sub02 {  display: inline-block;  font-family: TeX Gyre Heros, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;}

<ul class="breadcr">  <li class="breadcr">1</li>  <li class="active breadcr">2</li>  <li class="breadcr">3</li></ul><ul class="sub">  <li class="sub02" style="margin-left: 25px;"><b>File or link</b>  </li>  <li class="sub02" style="margin-left: 53px;"><b>Category</b>  </li>  <li class="sub02" style="margin-left: 50px;"><b>Comments</b>    <li></ul>

Z-Index Not Working on Pseudo-Element