Question

我正在尝试为其后面的父元素索引，但它不起作用。

这是我的笔：

和我的SCSS：

div {
  width: 400px;
  height: 250px;
  position: relative;
  background: grey;
  margin: 100px auto;
  z-index: 5;

  &:after {
    content: ":after";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    right: -70px;
    background: lightgrey;
    z-index: 4;
  }

}

我如何得到我的：之后出现在我的父div之后？

Answer 1

我想我明白了。就像ajp15243所说，我不能将子元素放在父元素后面。

所以我最终创建了2个不同的伪元素，一个:before和一个:after，它们都出现在div的其他子元素后面（使用负z索引），而我可以将after置于比before更低的z索引处，以获得我想要的效果。

div {
  width: 400px;
  height: 250px;
  position: relative;
  margin: 100px auto;
  z-index: 5;

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: grey;
    z-index: -1;
  }

  &:after {
    content: ":after";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    right: -70px;
    background: lightgrey;
    z-index: -2;
  }

}

这是笔：

http://codepen.io/Tiger0915/pen/XJKBoq

Z在它的父母后面索引一个伪元素

1 个答案: