CSS Position 固定下面的父伪元素

Question

这里，在下面的例子中......父元素是固定的......伪元素位于父元素之上......

HTML

<div class="b"> </div>

CSS

 .b
{
  height: 100px;
  width: 400px;
  border: 1px solid #a7a7a7;
  top: 100px;
  left: 100px;
  background: #fff;
  position: fixed;
}
.b::after
{
  content:'';
  position: absolute;
  top: -15px;
  left: 20px;
  height: 30px;
  width: 30px;
  border:1px solid #a7a7a7;
  transform:rotate(45deg);
  z-index:-1;
  background: red;
}

http://codepen.io/annamalai-saro/pen/wBqzzX

我想要它在父级下面...？？

Answer 1

使用这个 css 代替 top:

.b::before
{
  content:'';
  position: absolute;
  bottom: -15px;
  left: 20px;
  height: 30px;
  width: 30px;
border:1px solid #a7a7a7;
  transform:rotate(45deg);
  z-index:-1;
  background: red;}