CSS3 卷页效果问题

Question

我目前正在开发一个使用 CSS3 的“页面提升”效果的网站(请参阅 demo items 2-4 here )，对于我的第一页，效果很好。

但是，我现在正在尝试将它添加到具有背景颜色的元素(工作元素在 .lift 元素内有元素，这使得阴影位于堆叠中的所有内容下方上下文)，但在非工作元素上，z 索引似乎有问题。它会走向一个极端(阴影位于背景之上；.lift 元素上的 z-index:1)或另一个极端(阴影不仅位于背景下方) :after 元素，但在 that 元素的父元素之下；.lift 元素上没有 z-index)。

Here's a demonstration of the issue I'm running into, with some notes.阴影应该在白框下方，但在蓝色框上方。有没有办法解决这个问题，使阴影位于正确的位置，而无需将背景移动到 .lift 元素的子元素(ren)或在 .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);
}

Answer 1

这是你的#main 的 z-index .. 超过你的 .lift:after

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

我建议你不要为 z-index 使用负值。

继续