Question

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

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       此整数是当前堆叠上下文中生成的框的堆栈级别。该框还会建立新的堆叠上下文。

<强> .img       当前堆叠上下文中生成的框的堆栈级别为0.除非是根元素，否则该框不会建立新的堆叠上下文。

[...]

在每个堆叠上下文中，以下按顺序绘制以下图层：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

[...]

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

有关详细信息，请参阅CSS 2.1: 9.9.1 Specifying the stack level: the 'z-index' property。

解决方案

不要忘记您可以创建第二个伪元素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); }后面的效果：

{{1}}

dabblet demo

CSS z-index和定位问题

1 个答案:

解决方案