CSS Z-Index: -1

Question

I have an element, in this case an li and have positioned it relative and then have an :after pseudo element from it. It has "" content, positioned absolutely, has a position and dimesions and a box shadow. I have set it's z-index to -1 and the problem is that it's dropping right back to be the bottom most z-indexed element on my page. I expect it to drop back 1 place so to be just behind the li.

I am following this: http://nicolasgallagher.com/css-drop-shadows-without-images/

Any ideas? If I set the pseudo's z-index to be 1, then it jumps infront of the li, I just want it one stop behind it instead.

Answer 1

The z-index of an element positions it relative to the nearest stacking context, not necessarily a parent. Additionally, no element can be rendered behind the stacking context, regardless of whether you specify a negative z-index value (except in FF2, apparently). If you intend for the pseudoelement to show up behind the li , the element that is an ancestor of the li must create a stacking context.

Now, an element only creates a stacking context if one of the following conditions is true (taken from MDN ):

• the element is the root element (HTML),
• it is positioned (absolutely or relatively) with a z-index value other than "auto" ,
• it has an opacity value less than 1. (See the specification for opacity)

As you might have noticed, explicitly specifying a value for the z-index property of the container of the li (other than "auto") resolves the problem. This is because the container now creates its own stacking context, and all descendants for which it is the nearest stacking context will be arranged according to their z-index values relative to the container.