CSS中的z

更新时间:2023-04-07 07:56:13 阅读：评论：0

z-index属性介绍

只有设置了定位我们才会使用到该z-index属性，如：固定定位、相对定位、绝对定位。定位元素默认的z-index属性值是0。如果2个定位的元素都没有设置z-index属性，后者会覆盖到前者。如果2个定位的元素都设置了z-index属性，并且数值一样大还是后者会覆盖到前者。z-index属性的属性值大的就会覆盖小，就是设置元素的层级。

z-index属性实践

用实践证明这句话，如果2个定位的元素都没有设置z-index属性，后者会覆盖到前者。

代码块

<!doctype html><html lang="en"><head>  <meta chart="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="x-ua-compatible" content="ie=edge">  <title>z-index属性</title>  <style>      div{      width: 200px;      height: 200px;    }      .div1{       background-color: red;       position: relative;       top: 50px;       left: 50px;     }     .div2{       background-color: slateblue;       position: relative;       left: 100px;     }      </style></head><body>    <div class="div1"></div>    <div class="div2"></div语文教学案例分析></body></html>

结果图

用实践来证明这句话，如果2个定位的元素都设置了z-index属性，并且数值一样大还是后者会覆盖到前者。

代码块

<!doctype html><html lang="en"><head>  <meta chart="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="x-ua-compatible" content="ie=edge">  <title>z-index属性</title>  <style>      div{      width: 200px;      height: 200px;    }      .div1{       background-color: red;       position: relative;       top: 50px;       left: 50px;       z-index: 2;     }     .div2{       background-color: slateblue;       position: relative;       天净沙 秋思赏析left: 100px;       z-index: 2;     }      </style></head><body>    <div class="div1"></div>    <div class="div2"></div></body></html>

结果图

用实践来证明这句话，z-index属性的属性值大的就会覆盖小，就是设置元素的层级。

代码块

<!doctype html><html lang="en"><head>  <meta chart="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="x-ua-compatible" content="ie=edge">  <title>z-index属性</title>  <style>      div{      width: 200px;      height: 200px;    }      .div1{       backgro印地语是哪国语言und-color: red;       position: relative;       top: 50px;       left: 50px;       z-index: 3销售工作总结范文;     }     .div2{       background-color: slateblue;       position: relative;       left: 100px;       z-index: 2;     }      </style></head><body>    <div class="div1"></div>    <div class="div2"></div></body></html将进酒拼音>