CSS3页面卷曲效果问题

我目前正在一个使用CSS3的页面提升效果的网站上工作。请参阅，对于我的第一个页面，它工作得很好

但是，我现在尝试将其添加到一个具有背景颜色的元素中，工作元素在.lift元素中包含元素，这使得阴影位于堆叠上下文中所有元素的下方，但在非工作元素上，z索引似乎有问题。它将走向一个极端，阴影位于背景之上；z-index:1 on。提升元素或其他元素阴影不仅位于其所在元素的下方：之后，而且位于该元素的父元素的下方；提升元件上没有z索引

阴影应该在白色框的下面，但在蓝色框的上面。有没有一种方法可以解决这个问题，使阴影位于正确的位置，而无需将背景移动到.lift元素的子元素或在.lift元素周围添加无关的包装

代码如下：

<div class="main">
    <div class="lift"></div>
</div>

.main {
    background: #00f;
    height: 151px;
    width: 400px;
}
.lift {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    height: 150px;
    width: 200px;
    background: #fff;
}
.lift:after {
    content:'';
    position: absolute;
    z-index: -2;
    width: 75%;
    max-width: 300px;
    height: 15%;
    bottom: 24px;
    right: 10px;
    -webkit-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotateZ(3deg) skewX(10deg);
    -moz-transform: rotateZ(3deg) skewX(10deg);
    -ms-transform: rotateZ(3deg) skewX(10deg);
    -o-transform: rotateZ(3deg) skewX(10deg);
    transform: rotateZ(3deg) skewX(10deg);
}

---

这是你的主。。过马路。电梯：之后

.main {
    background-color: #00f;
    height: 300px;
    width: 400px;
    margin-bottom: 20px;
    padding:20px;
    position:relative;
    z-index:-3;
}

我建议您不要对z索引使用负值

---

继续

我不确定我是否理解这个问题。你想在蓝盒子里面的白盒子上画一个阴影，但是现在阴影要么在蓝盒子的上面，要么在蓝盒子的后面？@cowboybebebop-基本上是正确的，是的。你的解决方案适用于特定的小提琴，尽管它仍然打破了整个场地的规模。不幸的是，这个站点非常复杂，所以我不得不接受一个不同的、不太理想的解决方案。也就是说，你不能使用负z索引来实现这个效果，它的目的是将它推到其父元素后面，而这不能用正z索引值来实现。此外，根据W3C规范，允许负z索引。反对使用负z指数就像反对负利润率一样——技术原因不再相关，因此剩下的是基于被认为更正确的观点的观点，以及基于错误理解和滥用的问题。