如何为一个父级的子元素赋予比另一个父级更高的z索引？

Question

我有一个侧边栏，它分为两个具有相等Z索引的div。

第一个div， top ，有一个链接，显示另一个div hover ，当你在它悬停。

hover向下延伸到底部div， bottom ，但是由于top和bottom具有相同的z索引，因此hover被bottom覆盖。

不管我给bottom赋予z-index多高，都只会影响它在top显示方式。 我怎样才能得到它掩盖了bottom ？

顺便说一句，我也想对bottom做同样的事情，因此会有一个应该bottom-hover在top的bottom-hover 。

因此，给top和bottom不同的z索引不是一种选择。

这是一个小提琴来演示： http : //jsfiddle.net/tsnuh7q1/

的HTML：

<div class="top">top
    <div class="hover">HOVER</div>
</div>
<div class="bottom">bottom<div>

CSS：

.top {
    width: 200px;
    height: 100px;
    background: blue;
    z-index: 3;
    position: relative;
}
.hover {
    z-index: 40;
    width: 170px;
    height: 300px;
    position: absolute;
    background: red;
    left: 30px;
}
.bottom {
    width: 200px;
    height: 100px;
    background: green;
    z-index: 3;
    position: relative;
}

Answer 1

子z-index始终位于父级上下文中。

采取

#A { z-index: 1; }
#B { z-index: 2; }

#A * { z-index: 1000; }

#A孩子将永远在#B下，并且是孩子。 它们的z-index的上下文是较低的层。

Answer 2

在为我自己的问题寻找解决方案时遇到了这个问题。 不由得放手一搏。

如果我正确理解您要做什么，为什么不这样做呢？

http://jsfiddle.net/tsnuh7q1/2/

 .top, .bottom { width: 100%; height: 100px; background: lightblue; position: relative; } .bottom { background: green; } .hover { position: absolute; top: 0; left: 10%; display: none; width: 100px; height: 150px; background: red; } a:hover .hover { display: block; } .bottom .hover { top: initial; left: initial; right: 10%; bottom: 0; } .top:hover, .bottom:hover { z-index: 1; } 

 <div class="top">top <a href="#0">link<div class="hover">HOVER</div></a> </div> <div class="bottom">bottom <a href="#0">link<div class="hover">HOVER</div></a> <div>