如何修复覆盖“z-index：-1”规则的背景颜色

Question

With pure CSS code i generated some ribbons.

If u put a background-color or background-image to the ribbon's parent or html body, the ribbon :after and :before border-color is not shown for some reason, even with a z-index: -1 .

The reason is that the background-color of the parent is hiding it but i can't find a solution using both, background-color and ribbon :after and :before border-colors.

The demonstration: http://codepen.io/anon/pen/XXOERg

Answer 1

With z-index: -1 you position an object behind your background <div/> which has no stacking context. Give it a z-index and it will work:

<div class="col-md-6" style="background-color:blue;z-index:0">
    <!-- ... -->
</div>

Here is a codepen fork

Answer 2

Add the parent element:

position: relative;
z-index: 0;

Here is a CodePen demonstrate it