为什么 z-index 对 div 没有作用？

Question

我正在尝试让我的页脚显示在页脚背景的上面，但是z-index似乎不起作用。有人看出问题了吗？http://jsfiddle.net/f2ySC/

- TruMan1

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/

---

这将把页脚带到“当前堆叠上下文”中：

......根元素形成根堆叠上下文。其他堆叠上下文由具有计算值为“z-index”的任何定位元素（包括相对定位元素）生成，而该值不是“auto”。堆叠上下文不一定与包含块相关。在CSS的未来版本中，其他属性可能会引入堆叠上下文，例如“opacity”......

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

- Alex

---

六年后，这仍然对我有帮助。谢谢！ - Josh Saint Jacque

Answer 2

使用负边距不是一个好的方法。z-index:-1; 可以实现效果，只是将内容显示在另一个div的背景上 :)

- Sel Fish

---

创建一个 div 子元素并设置父元素和子元素的 z-index 对我很有用。可惜不得不在父元素和子元素之间创建一个额外的 div 来设置 z-index。还必须设置这个中间 div 的不透明度和背景颜色。 - devssh

Answer 3

这是你想要的效果吗？更新示例

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

- PatrikAkerstrand

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也可以起作用

- jacktheripper