隐藏其父母背后的div？

Question

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

.content-wrapper相对定位并包含所有页面内容(不仅仅是弹出窗口).

.popup绝对定位.

.close也绝对定位.

当光标进入弹出窗口时,我有一些javascript移动关闭(所以我有一个很好的关闭栏出现在侧面).我发现这样做的最好方法就是使用jQuery动画.隐藏/显示甚至会造成口吃效果.stop()无法解决.我的问题是试图将.clop隐藏在.popup后面.无论我为两个div设置什么z-index .close都不会落后于.popup.

是否有可能在另一个绝对定位的div中有一个绝对定位的div位于其父级后面,如果是这样,怎么样？

Answer 1

是的,使用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; }?

但这不适用于IE7标准.我建议使用jQuery(或您选择的其他框架)来隐藏div:

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