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: 20pxto将其定位回原来的位置elem2。然后给出elem11elem2的 z-index、3elem3的 z-index 和 2 的 z-index。

希望有帮助。

于 2013-03-07T11:09:03.860 回答