文章目录
1、z-index简介
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
1.1 为什么会出现z-index
- HTML文档流默认是元素与元素之间默认不会覆盖的，但是有部分场景需要我们去手动设置定位，这个时候元素就会产生重叠，而重叠的部分应该显示谁呢？
为了解决上面那个问题，人们便想出了z-index的办法。
2、使用
2.1 没有使用z-index
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:100px; height:100px; position:absolute; } .box1{ background: rgb(196, 196, 235); top:0; } .box2{ background: rgb(230, 154, 154); top:50px; } .box3{ background: rgb(140, 226, 140); top:150px; } </style> </head> <body> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </body> </html>
2.2 当box1的z-index设置为0时
.box1{ background: rgb(196, 196, 235); top:0; z-index: 0; }
效果如下
2.3 当box1的z-index设置为1时，效果如下
说明z-index的默认值为0
2.4 更改三个盒子的z-index
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:100px; height:100px; position:absolute; } .box1{ background: rgb(196, 196, 235); top:0; z-index: 1; } .box2{ background: rgb(230, 154, 154); top:50px; z-index:2; } .box3{ background: rgb(140, 226, 140); top:130px; z-index:-1; } </style> </head> <body> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </body> </html>
- 效果
3被覆盖，说明z-index越大离用户越近，越小则越远
站的更高看得越远，挖得更深，技术更好!
