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 
     [...]

Values have the following meanings:

<integer> This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.

auto The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

[...]

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
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