为什么z-index不适用于div？ [英] Why z-index is not working for div?

问题描述

我想让我的页脚显示在页脚背景的顶部，但z-index似乎没有工作。有人看到有什么问题吗？ http://jsfiddle.net/f2ySC/

I am trying to get my footer to show on top of the footer background, but z-index seems not to be working. Does anyone see what is wrong with it? http://jsfiddle.net/f2ySC/

推荐答案

您必须明确定义位置属性：

.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'...

... The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' ...

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

这篇关于为什么z-index不适用于div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！