CSS Dim overlay: Shining through

I have a di开发者_StackOverflowm overlay, and want certain elements to poke through. It seems a higher z-index is not enough: I must set position: relative/absolute. Is there any way to avoid this? See my basic example here: http://jsfiddle.net/hSYU2/. As soon as you remove the position, the circle disappears.

An explanation of the mechanics would be swell.

From CSS2 specification,

'z-index'  
     Value:         auto | <integer> | inherit
     Initial:       auto
     Applies to:    positioned elements  

z-index only applies to positioned elements (i.e: fixed, absolute or relative), so no, there is no way to avoid it.