html - 被 box-shadow 覆盖的子元素

Question

大家好，

我遇到了一个问题:.elem3 的框阴影不应与 .elem2 重叠。我试图用 z-index 解决这个问题。一开始我以为是IE的bug，但在所有浏览器中都是相同的结果。

有人知道答案吗？

..对不起我的英语不好我是德国人:)

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 不能高于其父节点，您必须从 elem1 中删除 elem2，如下所示:

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

您可以通过向 elem2 添加 margin-top: 20px 将其放回原来的位置。然后给 elem1 的 z-index 为 1，为 elem2 的 z-index 为 3，为 elem3 的 z-index 为 2。

希望对您有所帮助。