CSS定位伪元素堆叠

Question

你好我&使用前在我的元素之后，它的工作很好，但问题是，当我以后会消失设置背景颜色为部分&之前，我知道这个问题的出现，因为的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; 
} 

我也调整你的伪元素一点点，所以你得到的阴影像贴图

Stack snippet

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>

Answer 2

设置的box-shadow-1父一个z-index值。

section{ 
 
    height:400px; 
 
    padding:50px 0; 
 
    background-color:#00fb8f; 
 
} 
 
.box-shadow-1-parent { 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 
.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 box-shadow-1-parent"> 
 
       <div class="box-shadow-1"> 
 
        Hello World 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

Answer 3

这是你在找什么？

section{ 
 
    height:400px; 
 
    padding:50px 0; 
 
    background-color:#00fb8f; 
 
} 
 
.box-shadow-1{ 
 
    height:200px; 
 
    position:relative; 
 
} 
 
.box-shadow-1 > div { 
 
    background-color:#e8e8e8; 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 
.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"> 
 
        <div>Hello World</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

Answer 4

我认为实现这一目标的唯一途径是将<section>发送到后台，再带来.box-shadow1着这样的父母，

section{ 
    height:400px; 
    padding:50px 0; 
    background-color:#00fb8f; 
    z-index: -2; 
} 

.col-lg-11 { 
    z-index: 1; 
} 

---

作为你可以在下面看到你实现你正在寻找的东西。

section{ 
 
    height:400px; 
 
    padding:50px 0; 
 
    background-color:#00fb8f; 
 
    z-index: -2; 
 
} 
 

 
.col-lg-11 { 
 
    z-index: 1; 
 
} 
 

 
.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 #000; 
 
    -webkit-box-shadow: 0 20px 20px #000; 
 
    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>