z-index 属性指定一个元素的堆叠顺序。
比如说,两个盒子之间有重叠,那么是盒子1覆盖盒子2,还是盒子2覆盖盒子1,取决于两个盒子的z-index属性值的大小,属性值大的会覆盖属性值小的。
使用示例:
z-index: 10;
首先产生三个有重叠的盒子,不指定z-index值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index属性</title> <style type="text/css"> .b1{ width: 100px; height: 100px; background: green; float: left; position: relative; } .b2{ width: 100px; height: 100px; background: red; float: left; position: relative; top: 50px; left: -50px; } .b3{ width: 100px; height: 100px; background: blue; float: left; position: relative; top: 100px; left: -100px; } </style> </head> <body> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </body> </html>
显示效果如下:
可见,默认后面的盒子会覆盖前面的,当我们为每个盒子指定z-index值时:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index属性</title> <style type="text/css"> .b1{ width: 100px; height: 100px; background: green; float: left; position: relative; z-index: 10; } .b2{ width: 100px; height: 100px; background: red; float: left; position: relative; top: 50px; left: -50px; z-index: 3; } .b3{ width: 100px; height: 100px; background: blue; float: left; position: relative; top: 100px; left: -100px; z-index: 6; } </style> </head> <body> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </body> </html>
显示效果为:
由于我们将红色盒子的z-index设为三个盒子中的最小,因此,当有重叠部分时,其他盒子会堆叠在红色盒子上。
注意:IE浏览器不支持z-index属性