CSS中的z-index屬性如何使用

時間 2019-12-30

標籤 css index 屬性如何使用欄目 CSS 简体版

原文原文鏈接

z-index屬性介紹

只有設置了定位咱們纔會使用到該z-index屬性，如：固定定位、相對定位、絕對定位。
定位元素默認的z-index屬性值是0。
若是2個定位的元素都沒有設置z-index屬性，後者會覆蓋到前者。
若是2個定位的元素都設置了z-index屬性，而且數值同樣大仍是後者會覆蓋到前者。
z-index屬性的屬性值大的就會覆蓋小，就是設置元素的層級。

z-index屬性實踐

用實踐證實這句話，若是2個定位的元素都沒有設置z-index屬性，後者會覆蓋到前者。html
代碼塊ui

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="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>

結果圖code

用實踐來證實這句話，若是2個定位的元素都設置了z-index屬性，而且數值同樣大仍是後者會覆蓋到前者。
代碼塊htm

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="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>

結果圖blog

用實踐來證實這句話，z-index屬性的屬性值大的就會覆蓋小，就是設置元素的層級。it
代碼塊io

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="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: 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>