如何为一个父元素的子元素提供比另一个父元素更高的 z-index？

Question

我有一个侧边栏分成两个 div 具有相同的 z-index。

第一个 div、top 有一个 link，当您将鼠标悬停在它上面时会显示另一个 div、hover。

hover 向下延伸到底部 div、bottom，但由于 top 和 bottom 具有相同的 z-index，hover 被 bottom 覆盖。

无论我给 bottom 的 z-index 多高，这只会影响它在 top 中的显示方式。我怎样才能让它掩盖 bottom？

顺便说一句，我也想对bottom做同样的事情，所以会有一个bottom-hover应该掩盖top。

所以给 top 和 bottom 不同的 z-index 不是一个选项。

这里有一个fiddle来演示：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

child z-index 始终在 parent.

的上下文中

拿

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

#A * { z-index: 1000; }

children 的 #A 将永远在 #B 下面，它是 children。他们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>

如何为一个父元素的子元素提供比另一个父元素更高的 z-index？

How can I give a child element of one parent a higher z-index than another parent?

html

css

z-index