2

对不起，这样的“虚拟”问题，但我真的找不到解决方案。

我用图形说明了这种情况：

在此处输入图像描述

在 内部container，有两个兄弟姐妹 (RED <div>和BLUE <div>)。两者都有position: absolute;

红有z-index:1; 蓝有z-index:2;

RED的孩子（GREEN）有position:relative;和z-index:99;

我想让 GREEN 高于BLUE

谢谢！

更新 1. 这是小提琴

http://jsfiddle.net/yn9z7/

4

4 回答 4

3

解决这个问题的关键在 sudhAnsu63 链接的文章中：

可以通过以下三种方式之一在元素上形成新的堆叠上下文：

当一个元素是文档的根元素时（元素）

当一个元素的位置值不是 static 并且 z-index 值不是 auto 时

当元素的不透明度值小于 1 时

但解释恰恰相反。要将蓝色元素设置在红色和绿色之间，红色不能生成堆叠上下文。由于第二条规则，它正在生成堆叠上下文；它具有绝对位置和不同于自动的 z-index。

所以，解决方案是：

#red{
    z-index:auto;
}

演示

于 2013-09-08T19:57:39.500 回答
1

这不起作用，因为 Red 的 z-index 低于蓝色。z-index 仅适用于具有公共根元素的元素。

查看本文中的Stacking Contexts部分

于 2013-09-08T18:51:54.393 回答
1

这里的蓝色 div 和红色 div 是容器 div 的直接子级。z-Index 将无法正常工作。

尝试将蓝色 div 的不透明度更改为 0.99；

.bluediv {
  opacity: .99;
}

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-属性-a-comprehensive-look/

于 2013-09-08T19:00:56.410 回答
0

是的，这是不可能的，因为子元素继承了父元素的 z-index。所以给绿色 div 的 z-index 为 99 是没有意义的，因为它的 z-index 仅在父级（红色 div）内有效。所以如果你给一个容器一个特定的 z-index 让我们说 20，这个容器内的 z-indexing 又从 0 开始。这是一件好事，因为否则我们必须给所有孩子一个最小 21 的 z-index 否则他们赢了不可见。网页上的第一个容器是 body 标签，您可以使用 z-index 属性从第 0 层（z-index 0）开始堆叠其所有子元素。就像 body 标签一样，每个孩子都有自己的 z-index “系统”，与 DOM 中的更高元素无关。因此 z-indexing 在具有自己定义的 z-index 的父容器内从 0 开始。

于 2013-09-08T19:31:58.240 回答