css parent element to appear above child

Question

I have 2 nested css elements. I need to get the parent to be on top, that is, above in z-axis, of the child element. Just setting z-index is not sufficient. How do I do this? Thanks.

http://jsbin.com/ovafo/edit

Edit: I can't set a negative z-index on the child, that'll set it to below the page container on my actual page. Is this the only method?

Edit2: Updated example to set both on position:absolute;

Answer 1

Set a negative z-index for the child, and remove the one set on the parent.

http://jsbin.com/omazi/edit

Answer 2

You would need to use position:relative or position:absolute on both the parent and child to use z-index.

Answer 3

Parent wraps child. How would parent ever sit on top of it? Set child to display:none if you don't want to display it.

Answer 4

Since your divs are position:absolute, they're not really nested as far as position is concerned. On your jsbin page I switched the order of the divs in the HTML to:

<div class="child"><div class="parent"></div></div>

and the red box covered the blue box, which I think is what you're looking for.