2

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 !

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Naemy
  • 446
  • 2
  • 5
  • 17

2 Answers2

3

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:

Community
  • 1
  • 1
Adrift
  • 58,167
  • 12
  • 92
  • 90
1

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

Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
  • 3
    Only if the parent forms a new stacking context (which in this case it does because of `z-index: 10`). – BoltClock Mar 13 '13 at 20:40
  • Sure you can, it just makes the child fall below its parent. – cimmanon Mar 13 '13 at 20:40
  • You're right in this case, but as explained in my comment it only holds true in certain cases. See [this answer](http://stackoverflow.com/questions/11712040/why-does-z-index-1-appear-above-z-index-1/11712096#11712096) for a more detailed explanation. (cc @cimmanon) – BoltClock Mar 13 '13 at 20:51
  • Well, I said "a lower z-inxex than it's parent" which means not `auto`. ;-) But of course you are right. Nevermind. – Linus Caldwell Mar 13 '13 at 20:56