如何為一個父級的子元素賦予比另一個父級更高的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>