2

我有这段 html：

<html>
    <body>
        <header></header>
        <div></div>
        <footer></footer>
    </body>
</html>

和这段CSS：

header {
    width: 500px;
    height: 100px;
    background: red;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

div {
    width: 500px;
    height: 700px;
    background: yellow;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

footer {
    width: 500px;
    height: 50px;
    background: blue;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

您也可以在这里看到：http: //jsfiddle.net/XGTtT/基本上，我希望在其他两个区域下方有黄色区域，但 z-index 似乎不起作用。出了什么问题以及如何解决？

4

3 回答 3

3

要实现位于彼此前面或下方的元素，您需要混合使用绝对定位和 z-index，因为 z-index 目前不适用于默认定位，这是静态的。

根据您想要实现的目标，添加position: relative到 div 中可能会更容易，然后在 div 上使用负边距将其向上/拉到页眉和页脚下方。

于 2012-10-25T15:13:57.063 回答
1 
header {
    width: 500px;
    height: 100px;
    background: red;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    top:0;
}

div {
    width: 500px;
    height: 450px;
    background: yellow;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    position: absolute;
}

footer {
    width: 500px;
    height: 50px;
    background: blue;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/XGTtT/8/

于 2012-10-25T15:25:53.947 回答
0

较高的数字将在前面，较低的数字将在后面。并为每个元素给出一些不同的数字。与 div 1、页眉 2 和页脚 3 一样。

于 2012-10-25T15:08:12.823 回答