CSS Положение фиксированного родительский псевдо элемент ниже

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 вместо верха:

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