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 .. .lift:after を超える z-index です

.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 に答える