css z-index属性
一、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,我们将及时处理。
微信扫码关注
更新实时通知