cssz索引与定位问题

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

例如：

HTML:

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

不幸的是，我不能使用这种方法，因为页面的其余部分是如何定位的。我必须能够在父元素上设置z索引

---

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

如果包含元素建立了堆叠上下文，则即使是z-index为负值的元素也将始终位于包含元素的边框/背景前面。每个具有非

auto

的

z-index

值的项目构成堆叠上下文：

'z-index'

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

.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);
}

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

.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);
}