<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; position: absolute; } .div1{ background-color: #f00; left: 100px; top: 100px; z-index:2; } .div2{ background-color: #0f0; left: 200px; top: 200px; z-index:1; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
z-index结论:
●只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index;
●z-index的值是没有单位的,值是一个正整数,默认的z-index的值是0;
●如果多个定位元素没有设置z-index属性或者z-index值设置一样那么写在HTML后面的定位元素就会压盖住前面的定位元素
●z-index表示谁压盖着谁,数值大的会压盖住数值小的,只有定位的元素才有z-index值;
●在使用固定定位来实现顶部导航栏添加.nav{z-index:999999999}