Why is z-index not ordering elements correctly?

I'm trying to get the blue smiley underneath the yellow smiley. What am I doing wrong?

#group {
  position: relative
}

#sitename {
  z-index: 1
}

#listen {
  position: absolute;
  top: 150px;
  z-index: 0
}

<div id="group">
  <h1 id="sitename">
    <a href="/"><img src="http://i5.photobucket.com/albums/y196/dannydude182/smiley-300x300.png" /></a>
  </h1>
  <a id="listen" target="_blank" href="/"><img src="http://i925.photobucket.com/albums/ad96/emly_haha/annoyed开发者_Python百科-smiley.jpg" /></a>
</div>

Live copy

z-index rules vary depending on whether the element is positioned or not. If you make both elements positioned, it works: http://jsfiddle.net/zPJm2/4/

It's a bit more complicated than most of us think it is when we first start with it. It's well worth reading the actual CSS specification on z-index for the details, but basically, there are multiple stacking contexts. From the spec:

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR].

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

Set the absolute div z-index to be less than zero if you want it behind any relative ones.

One possibility is to check the default styles on elements. I was trying to overlap a menu dropdown having Ul and LI elements over a slide show. I increased the z index on ul but did not notice a z-index of 1 (coded before) on li preventing the overlapping. hope this help someone

Thanks Farhan