当你定义的CSS中有position属性值为absolute、relative或fixed,
用z-index此取值方可生效。
此属性参数值越大,则被层叠在最上面。
例子:
<html> <head> <style> .z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;} .z1{z-index:1;background:#000;} .z2{z-index:2;top:30px;left:30px;background:#C00;} .z3{z-index:3;top:60px;left:60px;background:#999;} </style> </head> <body> <div class="z1">z-index:1</div> <div class="z2">z-index:2</div> <div class="z3">z-index:3</div> </body> </html>
事例可参考然猫网已经修改好的顶部导航和导航栏的重叠。
这是出问题的时候的叠加层,开始覆盖了顶部导航,后来把z-index的去掉了后,就变成了第二张图,然后把z-index的值改为20后,就出现了第三张图(覆盖不了广告按钮),最后只得把顶部导航的z-index值改为比导航条大,才变成正常情况。针对于如果有叠加层过高,可以在该显示位置的css添加代码:position:relative;z-index:0
还没有评论,来说两句吧...