css - CSS3页面 curl 效果问题

我目前正在使用CSS3使用“页面提升”效果的网站（请参见demo items 2-4 here），对于我的第一页，它运行良好。但是，我现在正尝试将其添加到具有背景色的元素中（正在工作的元素在.lift元素内具有元素，这使得阴影位于堆叠上下文中的所有内容之下），但是在不起作用的位置元素，z索引似乎有问题。它将到达一个极端（阴影位于背景顶部； z-index:1位于.lift元素上）或另一极端（阴影不仅位于其:after元素下方，而且位于该元素的父级下方；否放在z-index元素上）。Here's a demonstration of the issue I'm running into, with some notes.阴影应在白色框下方，但应在蓝色框上方。有没有一种方法可以解决此问题，以便将阴影放置在正确的位置，而无需将背景移到.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 ..超过.lift：after之后的z-index.main { background-color: #00f; height: 300px; width: 400px; margin-bottom: 20px; padding:20px; position:relative; z-index:-3;}我建议您不要对z-index使用负值。继续关于css - CSS3页面 curl 效果问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14781369/