536 層疊順序

阿新 • • 發佈：2020-10-07

https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-orderz-index/

<!-- 我的demo -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #ddd;
    }

    .div0 {
      width: 200px;
      height: 100px;
      background-color: pink;
    }

    .div1 {
      position: relative;
      z-index: -1;
      width: 200px;
      height: 100px;
      background-color: skyblue;
      margin: -20px 30px;
    }

    .div2 {
      float: left;
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
    }

    .div3 {
      display: inline-block;
      width: 200px;
      height: 100px;
      background-color: orange;
      margin-left: -50px;
      margin-top: 30px;
    }

    span {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      margin-left: -50px;
    }

    .div4 {
      position: relative;
      left: 500px;
      top: -150px;
      width: 200px;
      height: 100px;
      background-color: #3cc;
    }

    .div5 {
      position: relative;
      left: 550px;
      top: -200px;
      width: 200px;
      height: 100px;
      background-color: pink;
      z-index: 11;
    }
  </style>
</head>

<body>
  <div class="div0">00</div>
  <div class="div1">11</div>
  <div class="div2">22</div>
  <div class="div3">33</div>
  <span>span行內元素span行內元素span行內元素span行內元素span行內元素span行內元素span行內元素span行內元素</span>
  <div class="div4">44</div>
  <div class="div5">55</div>
</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* html  根層疊上下文 
      層疊上下文的元素  -  html

      層疊順序  -  
      背景或邊框  < z-index負值 <  塊級元素  <  浮動元素  < 行內、行內塊元素  <  position z-index:auto/0    <    position z-index正值
    */

    html {
      background-color: pink;
    }

    /* 塊級元素  div*/
    .box {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    /* 浮動元素 */
    .box1 {
      width: 200px;
      height: 200px;
      background-color: #0cc;
      float: left
    }

    /* 行內、行內塊元素 */
    .box2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: yellowgreen;

    }

    .box3 {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      position: relative;

    }

    .box4 {
      width: 300px;
      height: 300px;
      background-color: orange;
      position: relative;
      z-index: 1
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      層疊準則:
      誰⼤誰上：當具有明顯的層疊⽔平標示的時候，如識別的z-indx值，在同⼀個層疊上下⽂領域，層
      疊⽔平值⼤的那⼀個覆蓋⼩的那⼀個。通俗講就是官⼤的壓死官⼩的。
      後來居上：當元素的層疊⽔平⼀致、層疊順序相同的時候，在DOM流中處於後⾯的元素會覆蓋前⾯
      的元素。
    */

    /* 
        層疊上下文元素:  
        1.html  根層疊上下文元素
        2.定位屬性  - z-index為數值  .box1, .box2   => html層疊上下里面

        p1元素  在  box1 層疊上下文元素裡面
        p2元素  在  box2 層疊上下文元素裡面
    */

    .box1 {
      width: 200px;
      height: 200px;
      background-color: hotpink;
      position: relative;
      z-index: 1;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: gold;
      position: relative;
      z-index: 2;
    }

    .box1 p {
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute;
      z-index: 999;
    }

    .box2 p {
      width: 100px;
      height: 100px;
      background-color: greenyellow;
      position: absolute;
      z-index: -999;
    }
  </style>
</head>

<body>
  <!-- z-index: 1 -->
  <div class="box1">
    <p>999</p>
  </div>

  <!-- z-index: 2 -->
  <div class="box2">
    <p>-999</p>
  </div>
</body>

</html>