Bei statischer Positionierung steht das :: before-Pseudoelement (Z-Index) vor dem Inhalt des Kindes, jedoch nach dem Hintergrund des Kindes. Kann jemand erklären, warum oder sogar wie dies geschieht oder ob dies ein Problem ist, das alle gängigen Browser haben?

<style>
div { background-color:yellow; width:400px; }
div::before { background-color:red; content:"div::before"; }
div::after { background-color:green; content:"div::after"; }
div p { background-color:blue; color:white; margin:-15px 0; padding:0; }
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p>
</div>

http://jsfiddle.net/funkyscript/ALrgf/