0

我有 3 个 DIVS。父级、子级和层（父级的兄弟）。该层应该出现在父子之间。

<div class="parent">
    <div class="child"></div>
</div>
<div class="layer"></div>

CSS

div {
    position: absolute;
    width: 100px;
    height: 100px;
}

.parent {
    z-index: 1;
    top: 0;
    left: 0;
    background-color: red;
}

.child {
    z-index: 3;
    top: 60px;
    left: 60px;
    background-color: blue;
}

.layer {
    z-index: 2;
    top: 30px;
    left: 30px;
    background-color: green;
}

这是一个 JS 小提琴：http: //jsfiddle.net/PHwua/

奇怪的是，我无法让图层出现在父母和孩子之间。在实时站点上，出于某种原因，这在除 Safari 之外的所有浏览器（IE8-11、FF、Chrome）中都有效。现在我什至无法让 JSFiddle 工作。

4

1 回答 1

3

您的问题可能与HTML 元素的堆栈顺序有关。

基本上，z-index影响同一堆叠上下文中的元素。parent和layer框在相同的上下文中；所以他们的z-indexes 首先被评估。然后根据它的堆叠上下文（因为它是 的子上下文，其中不存在任何其他内容）对child框进行评估。z-indexparent

如果您parent退出堆叠顺序（例如，通过使其 positionstatic或摆脱它的z-index），那么child和layer将处于相同的堆叠上下文中。

在这里分叉 JSFiddle。

于 2013-09-27T11:38:56.077 回答