Question

我有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工作。

Answer 1

您的问题可能与stack(ing) order HTML元素有关。

基本上，z-index会影响同一堆叠上下文中的元素。 parent和layer框位于相同的上下文中;所以首先评估他们的z-index es。然后child框的z-index将根据其堆叠上下文进行评估（由于其parent的子上下文，因此其中没有任何其他内容。

如果您从堆叠顺序中取出parent（例如，通过设置其位置static，或取消其z-index），那么child和{ {1}}将处于相同的堆叠环境中。

Forked JSFiddle here.

在父级和子级之间移动图层（z-index）

1 个答案: