css - 将子元素放在 parent::after 伪元素之上？

Question

那么如何将子元素放置在其父元素 ::after 伪元素之上呢？基本上我有一个带有 2 个伪元素的背景图像的 div:一个 ::before，它是一个绝对定位的全宽和高度，透明蓝色和一个 ::after，这是一个嵌入的框阴影，现在我试图将子元素放置在所有父元素的伪元素之上。我该怎么做？

这是一个 jsFiddle:http://jsfiddle.net/got3e2vb/ - 我希望将白色圆圈放置在父元素的::after 伪元素上方。我该怎么做？

Answer 1

z-index 就够了。

试试这个:

#author {
  width: 100%;
  height: 683px;
  overflow: hidden;
  background: url('images/parallax/apartment1.jpg');
  position: relative;
  opacity: 1;
}
#author:after {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: inset 0 0 150px #072243;
  content: ' ';
  opacity: 0.5;
  -webkit-transition: all .40s ease-out;
  -moz-transition: all .40s ease-out;
  -ms-transition: all .40s ease-out;
  -o-transition: all .40s ease-out;
  transition: all .40s ease-out;
}
#author:before {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #1a6dd3;
  content: ' ';
  opacity: 0.8;
}
#author:hover:after {
  box-shadow: inset 0 0 250px #0f3461;
  opacity: 0.9;
  cursor: pointer;
}
#author-preview {
  position: absolute;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: #fff;
  top: 0px;
  left: 0px;
  z-index: 3;
}

<div id="author">
  <div id="author-preview">
  </div>
</div>