将子元素放在父元素上方 ::after 伪元素？答案

【问题标题】：Place child element above parent ::after pseudo-element?将子元素放在父元素上方 ::after 伪元素？
【发布时间】：2015-05-26 20:59:18
【问题描述】：

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

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

【问题讨论】：

是的。尝试对一个执行 z-index: 99999 并将 z-index: -1 执行到另一个，仍然无法正常工作。
没有代码很难帮你。
早上第一件事就是把我的代码贴在这里。我现在不在电脑前。仍在等待建议

标签： css parent

【解决方案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>

【讨论】：

【解决方案2】：

对于标题的更一般的解决方案：

#author:first-child::before  {
    //etc...
}

【讨论】：