Question

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>

.content-wrapper is relatively positioned and contains all the page content (not just the popup).

.popup is absolutely positioned.

.close is also absolutely positioned.

I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn’t able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.

Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?

Answer 1

Yep, use z-index: http://jsfiddle.net/tGd4Q/

HTML:

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>​

CSS:

.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }​

This won’t work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:

$('.popup .close').hide();