关于position的层级
在层级比较多的页面中,经常会出现被遮盖的情况。下面用实例来讲讲这个问题的解决方法。
其实宗旨就一条:第一个父元素的层级一定要比第二个父元素的层级要高。
先看一下不如意的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab</title> <style> .f1,.f2{ border:1px solid #e5e5e5; position:relative; height:30px; margin-top:10px; width:80px; } .f2{margin-left:80px;} .f2{background-color:#00f;} #c1{background-color:#0f0;} #c2{background-color:#f00;} #c1,#c2{ border:1px solid #ccc; height:50px; position:absolute; left:0; top:20px; width:100px; } </style> </head> <body> <div class="f1"> 父级元素1 <div id="c1"> 子级元素1 </div> </div> <div class="f2"> 父级元素2 <div id="c2"> 子级元素2 </div> </div> </body> </html>
不如意的显示效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab</title> <style> .f1,.f2{ border:1px solid #e5e5e5; position:relative; height:30px; margin-top:10px; width:80px; } .f1{z-index:100;} .f2{margin-left:80px;z-index:90;} .f2{background-color:#00f;} #c1{background-color:#0f0;} #c2{background-color:#f00;} #c1,#c2{ border:1px solid #ccc; height:50px; position:absolute; left:0; top:20px; width:100px; } </style> </head> <body> <div class="f1"> 父级元素1 <div id="c1"> 子级元素1 </div> </div> <div class="f2"> 父级元素2 <div id="c2"> 子级元素2 </div> </div> </body> </html>
正确显示结果
总结:无论想要得到什么样的效果,只要你把需要放在最上层的元素的父级元素(及设置position:relative)的z-index值设置成最大的就可以了