javascript - 即使有一些变通方法或技巧，是否可以更改 div 的子元素的 z-index？

Question

我有两个 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;
}

Answer 1

从 #parent 中删除 z-index 并将子级的 z-index 更改为 -1

DEMO HERE

#parent {
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
}
#child {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    z-index: -1;
}