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