javascript - css position 伪元素堆叠

Question

你好 我在我的元素中使用了 before & after 并且它运行良好，但是当我为部分设置背景颜色时 before & after 将消失的问题我知道这个问题出现是因为z-index: -1 并且我知道我们不能在父元素上方堆叠子元素(之前和之后)所以解决方案是什么，我不需要创建任何新元素要做到这一点:

这是我需要的:

section{
    height:400px;
    padding:50px 0;
    background-color:#00fb8f;
}
.box-shadow-1{
    height:200px;
    background-color:#e8e8e8;
    position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background-color:#ff0000;
  -moz-box-shadow: 0 20px 20px #777;
  -webkit-box-shadow: 0 20px 20px #777;
  box-shadow: 0 20px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-shadow-1:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1">
                <div class="box-shadow-1">
                    Hello World
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

你需要给 box-shadow-1 的父级一个 z-index，像这样

.col-lg-11.col-lg-offset-1 {
    position:relative;
    z-index: 0;
}

我还稍微调整了你的伪元素，所以你得到了像发布的图像一样的阴影

堆栈片段

section{
    height:400px;
    padding:30px 0;
    background-color:#e8e8e8;
}
.col-lg-11.col-lg-offset-1 {        /*  added rule  */
    position:relative;
    z-index: 0;
}
.box-shadow-1{
    height:150px;
    background-color:#00fb8f;
    position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  height: 20px;
  max-width: 300px;
  background-color:#ff0000;
  -moz-box-shadow: 0 30px 20px #777;
  -webkit-box-shadow: 0 30px 20px #777;
  box-shadow: 0 30px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-shadow-1:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1">
                <div class="box-shadow-1">
                    Hello World
                </div>
            </div>
        </div>
    </div>
</section>