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>