Question

Hy guys，

我遇到了问题：.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;
        }

`

Answer 1

这是不可能的，因为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，elem2 z-index为3，elem3 z-index为2.

希望有所帮助。

子元素由box-shadow重叠

1 个答案: