CODEWITHSUNDEEP
cssz-indexpseudo-element
Naemy
Naemy

Reputation: 536

:after : z-index doesn't work

I'd like to put the black rectangle (:after) behind the h2, but z-index doesn't work.

I have this code in html

  <h2>Ce que tu auras peut-être un jour ou l'autre...</h2>

and this in CSS : 

#general .page h2 {
position: relative;
text-indent: -9999px;
width: 718px;
margin-bottom: 50px;
height: 116px;
z-index: 10;
background: url(img/banniere-hi-04.png);
}

#general .page h2:after {
display: block;
content: "";
position: absolute;
top: -15px;
left: 658px;
width: 544px;
height: 72px;
z-index: -1;
background: black;
}

Here's the problem (here with a black rectangle) : http://www.robinmastromarino.be/dataviz04/

Thank you for your help !

Upvotes: 2

Views: 1219

Answers (2)

Adrift
Adrift

Reputation: 59819

You need to give <div class="page"> a relative position and a positive z-index, then remove the z-index on the <h2> as the pseudo-element creates a new stacking context

More info as to why

Example:

Upvotes: 3

Linus Caldwell
Linus Caldwell

Reputation: 11068

You cannot give a child node a lower z-index than it's parent.

Upvotes: 1

Related Questions