Question

我有这段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似乎不起作用。有什么问题以及如何解决？

Answer 1

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

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

Answer 2

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/

Answer 3

前面会有更高的数字，更低的数字会回来。一个 nd为每个元素提供一些不同的数字。对于div 1，对于标题2和对于页脚3。

如何在css中定位页眉和页脚下面的主要内容

3 个答案: