我试图让我的页脚显示在页脚背景之上,但z-index似乎没有工作。有人看到它有什么问题吗? http://jsfiddle.net/f2ySC/为什么z-index不适用于div?
13
A
回答
44
你必须明确定义position
属性:
.footerBox {
background-color: #FFFFFF;
border: 10px solid #DDDDDD;
margin: 10px 0 -200px -10px;
width: 1185px;
z-index: 1000;
position:relative;
}
这带来的页脚到current stacking context
:
...根元素形式根堆栈上下文。其他堆栈 上下文由具有除“ ”auto之外的'z-index'的计算值的任何定位元素(包括相对定位元素的相对 )生成。堆叠上下文不一定与包含 块有关。在将来的CSS水平,其他属性可能会引入 堆叠上下文,例如“不透明” ......
0
在footerBox设置position
属性absolute
你的新代码应如下所示
.footerBox {
background-color: #FFFFFF;
border: 10px solid #DDDDDD;
margin: 10px 0 -200px -10px;
width: 1185px;
z-index: 1000;
position: absolute;
}
看到一个演示here
我们ing position: relative
也可以工作
1
这是你要找的效果吗? Updated example
我加position: relative;
到#footerBack
和.footerBox
使用负保证金是不是一个好的做法,以使z-index
4
。的z-index:-1;它只是在另一个div的背景上显示内容:)
相关问题
- 1. 为什么“text-align:center”适用于“div”,但不适用于“img”?
- 2. 为什么CSS高度100%不适用于正常的div?
- 3. 为什么填充不适用于带有表格的div?
- 4. 为什么这不适用于Firefox?
- 5. 为什么document.title不适用于SVG?
- 6. 为什么+ =不适用于列表?
- 7. 为什么setParameter()不适用于ServletRequest?
- 8. 为什么'time'不适用于'echo'?
- 9. 为什么Intelligencia.UrlRewriter不适用于iis6?
- 10. 为什么JavaScript不适用于Google Chrome?
- 11. 为什么setOnClickListener()不适用于GridView(AdapterView)
- 12. jquery:为什么这不适用于Chrome?
- 13. 为什么长度不适用于NSString?
- 14. 为什么reloadRowsAtIndexPaths不适用于iOS 5.0?
- 15. 为什么NSDateFormatter不适用于ICT TimeZone
- 16. 为什么_objc_autoreleasePoolPrint()不适用于iOS?
- 17. 为什么Graphics2D.setStoke()不适用于Graphics2D.drawString?
- 18. 为什么JSON.parse不适用于“23232323.”?
- 19. 为什么这不适用于Ruby 1.9.2?
- 20. 为什么NRVO不适用于此?
- 21. 为什么Vega 3不适用于Angular2?
- 22. 为什么DllImport不适用于“__Internal”?
- 23. 为什么OptionT不适用于Try?
- 24. 为什么seekg不适用于getline?
- 25. 为什么eval()不适用于数组
- 26. $ .getJSON()不适用于Chrome,为什么?
- 27. 为什么SOLR不适用于jQuery?
- 28. 为什么isEqualToString不适用于NSString?
- 29. 为什么childElementCount不适用于jQuery?
- 30. 为什么next_post_link()不适用于WP_Query?
6年后,这仍然帮助我。谢谢! – 2018-02-20 22:56:57