Question

我有一个在另一个下面的两个兄弟元素和一个:before块，它应位于第一个，但高于第二个：

HTML：

<div class="foo-1"></div>
<div class="foo-2">
    <a href="#">Hover me</a>
</div>

CSS：

div {
    width: 300px;
    height: 100px;
    text-align: center;
    position: relative;
}
.foo-1 {
    background-color: #333;
}
.foo-1:before {
    content: "";
    position:absolute;
    top: 50%; right: 0; bottom: 0; left: 0;
    box-shadow: 0 0 50px red;
    z-index: -1;
}
.foo-2 {
    background-color: #555;
    z-index: -2;
}
a {
    line-height: 100px;
    color: white;
}

第二个块也有一个a元素，它变得不可点击，因为它与第一个元素的:before块重叠。我应该使用什么样的z-index层次结构来使链接可以点击？

Answer 1

主要问题是，您在与z-index标记相同的上下文中为元素设置了否定body。这使得body标记与DOM中的其余节点重叠。 this page

与兄弟元素的Z-index层次结构问题

1 个答案: