CSS z-index 和定位问题

Question

我遇到了一个问题，如果我设置了相对定位的父元素的 z-index，那么伪元素就不能定位在它后面。

示例：http://dabblet.com/gist/2948390

HTML：

<div class="img"><img src="http://lorempixel.com/500/344"></div>

CSS：

.img {
  background:#fff;
  z-index:10;
  position:relative;
  width:500px;
  height:344px;
  border:1px solid black;
  padding:10px;
}

.img:after {
  content:'';
  z-index:0;
  position:absolute;
  bottom:-5px;
  left:10px;
  width:50%;
  height:20%;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}

你可以在这里看到，如果我从父元素中删除 z-index 并将伪元素上的 z-index 更改为负数，那么它可以工作。

http://dabblet.com/gist/2948402

很遗憾，我无法使用该方法，因为页面其余部分的内容是如何定位的。我必须能够在父元素上设置 z-index。

知道为什么我的第一个示例会这样运行吗？

Answer 1

如果包含元素建立了堆叠上下文，即使带有负值z-index 的元素也将始终位于包含元素的边框/背景之前。每个具有z-index 值但不是auto 的项目形成一个堆叠上下文：

'z-index'

    Value:   auto | <integer> | inherit
  Initial:   auto 
     [...]

值的含义如下：

<integer> 这个整数是当前堆叠上下文中生成的盒子的堆叠级别。该框还建立了一个新的堆叠上下文。

auto 生成的box在当前stacking context中的stack level为0。box不会建立新的stacking context，除非它是根元素。

[...]

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

1. 构成堆叠上下文的元素的背景和边框。
2. 具有负堆栈级别（最负优先）的子堆栈上下文。
3. [...]

这就是您的第二个版本有效的原因，.img 不会创建新的堆叠上下文。

请参阅CSS 2.1: 9.9.1 Specifying the stack level: the 'z-index' property) 了解更多信息。

解决方案

不要忘记您可以创建第二个伪元素.img:before。将其缩放到最大值，将其z-index 设置为高于.img:after 的负值并添加background-color。由于它将在.img:after 之上呈现，因此将产生.img:after 位于.img 后面的效果：

.img {
    background:#fff;
    z-index:10;
    position:relative;
    width:500px;
    height:344px;
    border:1px solid black;
    padding:10px;
}

.img:before{ /* create a pseudo-background */
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    content: '';
}

.img:after {
    content:'';
    z-index:-2;  /* lower value than .img:before{z-index} */
    position:absolute;
    bottom:-5px;
    left:10px;
    width:50%;
    height:20%;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}

dabblet demo