CODEWITHSUNDEEP
htmlcss
cup_of
cup_of

Reputation: 6697

z-index of pseudo element issues

I am having an issue getting my pseudo element to go behind its parent element. I need the red box to go in front of the blue box.

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}
<div id="mobile-nav-icon">
  <p>menu</p>
</div>

The result is weird, the text goes in front of the pseudo element but the background of the parent does not.

Any ideas?

jsfiddle

Upvotes: 2

Views: 127

Answers (2)

Johannes
Johannes

Reputation: 67778

Erase the z-index of the first rule:

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}
<div id="mobile-nav-icon">
  <p>menu</p>
</div>

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92963

Try using :before and :after at the same time.

#mobile-nav-icon {
  position: absolute;
}
#mobile-nav-icon:after {
  position: absolute;
  content: '';
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
}
<div id="mobile-nav-icon">
  <p>menu</p>
</div>

Upvotes: 1

Related Questions