Question

我试图让我的页脚显示在页脚背景之上，但是z-index似乎不起作用。有谁看到它有什么问题？ http://jsfiddle.net/f2ySC/

Answer 1

您必须显式定义position属性：

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;

    position:relative;

}

http://jsfiddle.net/f2ySC/1/

这会将页脚带入current stacking context：

...根元素形成根堆叠上下文。其他堆叠上下文由任何定位元素生成（包括相对的元素）定位元素）具有除'之外的'z-index'的计算值 '汽车'。堆叠上下文不一定与包含有关块。在未来的CSS级别中，可能会引入其他属性堆叠上下文，例如'不透明'......

http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

使用负边距不是一个好习惯。的z-index：-1;它只是在另一个div的背景上显示内容：）

Answer 3

这是你想要的效果吗？ Updated example

我将position: relative;添加到#footerBack和.footerBox以启用z-index

Answer 4

在footerBox上将position属性设置为absolute 您的新代码应如下所示

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;
    position: absolute;
}

查看演示here

使用position: relative也可以

为什么z-index不适用于div？

4 个答案: