1

我目前正在开发一个使用 CSS3 的“页面提升”效果的网站（请参阅此处的演示项目 2-4），对于我的第一页，它运行良好。

但是，我现在尝试将其添加到具有背景颜色的元素（工作元素在元素内部具有.lift元素，这使得阴影位于堆叠上下文中的所有内容下方），但在非工作元素上， z-indexing 似乎有问题。它将走向一个极端（阴影位于背景顶部；z-index:1在.lift元素上）或另一个（阴影不仅位于它所在的元素:after下方，而且位于该元素的父元素下方；不在z-index元素上.lift）。

这是我遇到的问题的演示，并附有一些注释。阴影应该在白色盒子的下方，但在蓝色盒子的顶部。有没有办法解决这个问题，以便阴影位于正确的位置，而不会将背景移动到.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);
}
4

1 回答 1

0

这是你的 #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 使用负值。

继续

于 2013-02-11T18:14:07.027 回答