2

我遇到了一个问题，如果我设置相对定位的父元素的 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。

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

4

1 回答 1

3

如果包含元素建立了堆叠上下文，那么即使带有负数的元素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 指定堆栈级别：'z-index' 属性）。

解决方案

不要忘记您可以创建第二个伪元素.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 演示

于 2012-06-18T13:56:15.557 回答