0

皆さん、

問題があります: .elem3 のボックス シャドウは .elem2 と重なってはいけません。これを z-index で修正しようとしました。最初はIEのバグかと思いましたが、どのブラウザでも同じ結果です。

誰か答えを知っていますか？

..私の下手な英語で申し訳ありませんが、私はドイツ人です:)

HTML: `

    <div class="elem1">
        <div class="elem2">

        </div>
    </div>
    <div class="elem3">

    </div>`

CSS:

`

        body {
            margin: 0;
        }

        .elem1 {
            position: absolute;
            height: 50px;
            width: 400px; 
            background: linear-gradient(top, #70ACD7, #005DA8);
            background: -moz-linear-gradient(top, #70ACD7, #005DA8);
            background: -webkit-linear-gradient(top, #70ACD7, #005DA8);
            z-index: 1;
            margin-top: 20px;
        }

        .elem2 {
            position: absolute;
            height: 50px;
            width: 100px;
            margin-left: 100px;
            background: linear-gradient(top, #CCC, #AAA);
            background: -moz-linear-gradient(top, #CCC, #AAA);
            background: -webkit-linear-gradient(top, #CCC, #AAA);
            background: -ms-linear-gradient(bottom, rgb(170,170,170) 43%, rgb(204,204,204) 72%);
            z-index: 3;
            box-shadow: 0px 0px 8px black;
        }

        .elem3 {
            position: absolute;
            top: 70px;
            left: 100px;
            width: 150px;
            height: 100px;
            background: linear-gradient(top, #AAA, #CCC);
            background: -moz-linear-gradient(top, #AAA, #CCC);
            background: -webkit-linear-gradient(top, #AAA, #CCC);
            background: -ms-linear-gradient(bottom, rgb(170,170,170) 43%, rgb(204,204,204) 72%);
            z-index: 2;
            box-shadow: 0px 0px 8px black;
        }

`

4

1 に答える 1

0

のelem2子でelem1あり、子は親よりも高い z-index を持つことができないため、これは不可能です。次のように、から削除する必要がありelem2ますelem1。

<div class="elem1"></div>
<div class="elem2"></div>
<div class="elem3"></div>

に を追加することで、元の場所に戻すことができmargin-top: 20pxますelem2。次にelem1、z-index を 1、elem2z-index を 3 elem3、z-index を 2 にします。

それが役立つことを願っています。

于 2013-03-07T11:09:03.860 に答える