Question

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

第一个div top有一个链接，当您将鼠标悬停在其上时，会显示另一个div hover。

hover向下延伸到底部div bottom，但由于top和bottom具有相同的z-index，因此hover涵盖bottom {1}}。

无论我给bottom的z索引有多高，这只会影响它在top中的显示方式。如何让它掩盖bottom？

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

因此，不能选择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>

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

2 个答案: