CSS位置偽元素堆疊

Question

您好，我在元素中使用了before＆after，並且運行良好，但是當我為section的before- after設置背景色時，該問題消失了，我知道此問題是由於z-index: -1出現的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> 

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的父.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>