1

See this fiddle.

Why is the newly added blue div showing over the paragraph? Isn't :before supposed to place it behind the p ?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
XCS
  • 27,244
  • 26
  • 101
  • 151

1 Answers1

1

There appears to be no documentation commenting on the z-dimensional position of :before and :after. And, as @BoltClock points out, they should behave just like normal elements (non-pseudo-elements) in terms of stacking.

Try using z-index: -1; on your :before segment if you want it behind the paragraph itself. (Basic fiddle: http://jsfiddle.net/fDvTk/; applied fiddle: http://jsfiddle.net/XvYng/)

Code:

#example1 p:before{
  /* ... */
  z-index: -1;
}​
Cat
  • 66,919
  • 24
  • 133
  • 141
  • This works on that example, but not in my case. It doesn't work in my case because this div is not the bottom-most of the page. See http://jsfiddle.net/xce56/2/ – XCS Aug 25 '12 at 19:48
  • 1
    Pseudo-elements behave just like regular elements within stacking contexts. There's no difference, so anything the spec says about the stacking of regular elements applies to pseudo-elements as well. – BoltClock Aug 25 '12 at 19:48
  • @Cristy Just apply a `z-index` to `#example1` itself, in addition to the `-1`. See [updated fiddle](http://jsfiddle.net/XvYng/). – Cat Aug 25 '12 at 19:50
  • Oh, don't get it. Z-indexes are relative? I mean, if they were absolute it meant that -1 will show behind all that doesn't have a z-index or has a larger z-index :-/ – XCS Aug 25 '12 at 19:52
  • 1
    @Cristy According to [this answer](http://stackoverflow.com/questions/3198947/can-i-override-z-index-inheritance-from-parent-element), z-indices are relative to the closest (parent) element. I can't find any documentation to back this up, however, but it seems to be the case pretty consistently. – Cat Aug 25 '12 at 19:55
  • 1
    Here's the relevant documentation: http://www.w3.org/TR/CSS21/visuren.html#layers – BoltClock Aug 25 '12 at 20:16