html将页脚容器放在主内容容器后面

Question

我试图将页脚栏放在主要内容之后。

html是这样的：

<header>
</header>
<main>
</main>
<footer>
</footer>

使用z-index:2代表<main>，z-index:1代表<footer>。但我似乎无法让它发挥作用。

主页和页脚的CSS目前看起来像这样：

main { 
    z-index:2; 
    margin-top:-32px;  //  is put on top of the header automatically
    background-color:#fff; 
    border:1px solid #222;
}

footer {
    z-index:1;
    border-top:1px solid #222;
    background-color:#3b3630;
    border-bottom: 2px solid #000;
    height:64px;
    margin-top:-32px;
}

到目前为止的结果是：

如何确保页脚被推到主要内容后面？

Answer 1

您必须将元素的position属性更改为默认static以外的其他值才能使z-index生效。

  

CSS中的z-index属性控制垂直堆叠顺序   重叠的元素。就像在，哪一个看起来好像是在物理上   离你更近。 z-index仅影响具有位置的元素   static以外的值（默认值）。

参考：Css-Tricks - z-index