Search code examples
cssz-indexpseudo-element

: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 !

Solution

  • 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: