css - 将 div 隐藏在其父级后面?

标签 css css-position css-transitions

<分区>

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

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

.popup 是绝对定位的。

.close 也是绝对定位的。

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

是否可以让一个绝对定位的 div 位于另一个绝对定位的 div 中,而另一个绝对定位的 div 位于其父级后面,如果可以,如何实现?

最佳答案

是的,使用 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();

关于css - 将 div 隐藏在其父级后面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10030386/

上一篇:CSS 和跨浏览器圆 Angular

下一篇:css - 如何动态切换 div id

相关文章:

javascript - 将 Google Maps 容器大小设置为等于 md-card-content 宽度

javascript - 根据条件添加或删除类

JQuery .scroll - 如何检索页面向下或向上滚动的距离?

html - 在固定高度的容器中垂直居中元素

jquery - 使用 .scroll() 控制变换属性

jquery - 如何将 css3 过渡缓动转换为 jquery 缓动函数?

javascript - 浏览器未缓存的 Symfony assteic 资源

javascript - 如何偏移 'back to top' 链接以占固定 header ?

javascript - 播放后如何重置 CSS 过渡

css - 组件中奇怪的 css 路径异常,如果 css 文件不在同一目录中