CSS位置伪元素堆叠

Question

Hello I use before & after in my element and it's work well, but the problem that when I set background-color for section the before & after will be disappear I know that this problem appear because of z-index: -1 and I know that we can't stacking child element (before & after) above the parent element so what is the solution, I don't need to create any new elements to do this trick:

It's what I need:

 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

You need to give the box-shadow-1 's parent a z-index , like this

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

I also adjusted your pseudo elements a little, so you get the shadow like the posted image

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

Set a z-index value for the parent of box-shadow-1 .

 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

Is this what you are looking for?

 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

I think the only way to achieve this is to send the <section> to the back and then bring the parent of .box-shadow1 forward like this,

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

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

---

As you can see below you achieve what you are looking for.

 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>