我有两个 div,我需要在视觉上将 parent
div 放在顶部(覆盖)child
div。
我阅读了其他问题,我知道 child
处于不同的流程中,而且我知道简单的解决方案是放置 parent
和 child
处于同一级别,不过我很想知道是否有任何解决方法/技巧可以解决这个问题。
我只针对最新版本的 Chrome 和 Firefox,也欢迎使用任何 CSS3 解决方案。
注意事项:
- 我需要在父级上保留 z:index。
- 在我的真实代码中父级是透明的,它需要抓取用户交互。
- 不能隐藏子项,必须可见。
http://jsfiddle.net/qn3n4ynw/1/
<div id="parent">
<div id="child"></div>
</div>
#parent {
position:absolute;
width:100px;
height:100px;
background-color:red;
z-index: 100;
}
#child {
position:absolute;
width:50px;
height:50px;
background-color:green;
z-index: 1;
}
最佳答案
从 #parent
中删除 z-index 并将子级的 z-index
更改为 -1
#parent {
position:absolute;
width:100px;
height:100px;
background-color:red;
}
#child {
position:absolute;
width:50px;
height:50px;
background-color:green;
z-index: -1;
}
关于javascript - 即使有一些变通方法或技巧,是否可以更改 div 的子元素的 z-index?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30258524/