z-index issue with relative and absolute positioning combination

Question

Please look at this example and show me how to make the blue <div> go behind the pink <div>. As you can see I have all ready tried this with the CSS z-index attribute, but without success.

---

[Update]

New Link Now my buttons in the blue div don't work.

Answer 1

As mentioned in mozilla developer page, "stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed".

I suppose you cannot do it using zIndex but, you can make it invisible by using opacity.

Answer 2

jsFiddle.

Pink div has opacity so you can see the results.

The blue div can't be a child of the pink div.