如何修复覆盖"z-index: -1"规则的背景色

Question

使用纯CSS代码，我生成了一些功能区。

如果将background-color或background-image放在功能区的父正文或 HTML 正文中，则功能区:after，并且由于某种原因不会显示:before border-color，即使使用z-index: -1也是如此。

原因是父级的background-color隐藏了它，但我找不到同时使用背景色和功能区 ：after 和 ：before 边框颜色的解决方案。

演示：http://codepen.io/anon/pen/XXOERg

Answer 1

使用 z-index: -1 您可以将对象放置在没有堆叠上下文的背景<div/>后面。给它一个z-index，它将起作用：

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

这是一个代码笔叉

Answer 2

添加父元素：

position: relative;
z-index: 0;

这是一个代码笔演示它