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>