CODEWITHSUNDEEP
cssz-index
Joshua Soileau
Joshua Soileau

Reputation: 3015

Z Index a pseudoelement behind it's parent

I'm trying to z index an element behind it's parent but it isn't working.

Here's my pen:

http://codepen.io/Tiger0915/pen/OPXway

and my SCSS:

div {
  width: 400px;
  height: 250px;
  position: relative;
  background: grey;
  margin: 100px auto;
  z-index: 5;

  &:after {
    content: ":after";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    right: -70px;
    background: lightgrey;
    z-index: 4;
  }

}

how do I get my :after to appear behind my parent div?

Upvotes: 0

Views: 1328

Answers (1)

Joshua Soileau
Joshua Soileau

Reputation: 3015

I think I figured it out. Like ajp15243 said, I can't position a child element behind a parent element.

So I ended up creating 2 different pseudoelements, a :before and an :after, both of which appear behind the other children of my div (using negative z indexes), and I can put the after at a lower z index than the before to get the effect I wanted.

div {
  width: 400px;
  height: 250px;
  position: relative;
  margin: 100px auto;
  z-index: 5;

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: grey;
    z-index: -1;
  }

  &:after {
    content: ":after";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    right: -70px;
    background: lightgrey;
    z-index: -2;
  }

}

Here's the pen:

http://codepen.io/Tiger0915/pen/XJKBoq

Upvotes: 3

Related Questions