一、z-index是什么
做过页面布局的同学对z-index属性应该是很熟悉了，z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。
在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。
2、z-index与定位元素
z-index只对定位元素（position）有作用。要设置非static的定位属性，z-index才会生效。static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
如果定位元素z-index没有发生嵌套(并列的)：
直接上代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 100px;
background: darkcyan;
}
#box2{
width: 300px;
height: 100px;
background: darkolivegreen;
/*相对定位*/
/*position: relative;*/
left: 100px;
top: 50px;
/*绝对定位*/
position: absolute;
left: 100px;
top:50px;
/*只有定位属性position才有层级z-index的概念*/
/*可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个*/
z-index: 6;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
| 相对定位： | |
| 1、相对于它原来的位置进行位置变化， | |
| 2、原来的位置还保留着 | |
| 绝对定位： | |
| 1、相对于离他最近的，有定位属性的父级元素进行定位 | |
| 2、它原来的位置不再保留 |
原文链接：https://www.qiquanji.com/post/6957.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知