CSS中关于z-index的堆叠顺序

1. 同级的z-index

<div class="container">
    <div class="div1">
      <h1>Division Element #1 z-index: 10</h1>
    </div>
    <div class="div2">
      <h1>Division Element #2 z-index: 20</h1>
    </div>
    <div class="div3">
      <h1>Division Element #3 z-index: 30</h1>
    </div>
 </div>

  .container div {
    
    
    position: relative;
    padding: 10px;
    width: 300px;
    height: 200px;
    opacity: 0.8;
  }
  .div1 {
    
    
    z-index: 10;
    background-color: #cfc;
  }
  .div2 {
    
    
    top: -150px;
    z-index: 20;
    background-color: rgb(75, 204, 236);
  }

  .div3 {
    
    
    top: -300px;
    z-index: 30;
    background-color: #fdd;
  }

1. 同级按照z-index的大小来顺序排列

2. 不同级的z-index

  <div class="container">
    <div id="div1">
      <div id="div1-1">
        <h1>Division Element #1-1</h1>
        <code
          >position: relative;<br />
          z-index: 55;</code
        >
      </div>
      <h1>Division Element #1</h1>
      <code
        >position: relative;<br />
        z-index: 50;</code
      >
    </div>

    <div id="div2">
      <h1>Division Element #2</h1>
      <code
        >position: relative;<br />
        z-index: 20;</code
      >
    </div>

    <div id="div3">
      <div id="div4">
        <h1>Division Element #4</h1>
        <code
          >position: relative;<br />
          z-index: 60;</code
        >
      </div>

      <h1>Division Element #30</h1>
      <code
        >position: absolute;<br />
        z-index: 40;</code
      >

      <div id="div5">
        <h1>Division Element #50</h1>
        <code
          >position: relative;<br />
          z-index: 10;</code
        >
      </div>

      <div id="div6">
        <h1>Division Element #6</h1>
        <code
          >position: absolute;<br />
          z-index: 30;</code
        >
      </div>
    </div>
  </div>

  div {
    
    
    position: relative;
  }
  h1 {
    
    
    font: inherit;
    font-weight: bold;
  }
  #div1,
  #div2 {
    
    
    border: 1px dashed #696;
    padding: 10px;
    background-color: #cfc;
  }
  #div1 {
    
    
    z-index: 50;
    margin-bottom: 190px;
  }
  #div1-1 {
    
    
    z-index: 55;
    padding: 10px;
    background-color: rgb(107, 195, 230);
  }
  #div2 {
    
    
    z-index: 20;
  }
  #div3 {
    
    
    z-index: 40;
    opacity: 1;
    position: absolute;
    top: 150px;
    left: 180px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
  }
  #div4,
  #div5 {
    
    
    border: 1px dashed #996;
    background-color: #ffc;
  }
  #div4 {
    
    
    z-index: 60;
    margin-bottom: 15px;
    padding: 25px 10px 5px;
  }
  #div5 {
    
    
    z-index: 10;
    margin-top: 15px;
    padding: 5px 10px;
  }
  #div6 {
    
    
    z-index: 30;
    position: absolute;
    top: 20px;
    left: 180px;
    width: 150px;
    height: 125px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
  }

1. 内部元素的z-index无论设置多小都不可能在显示外部元素之下
2. 基于1的基础计算不同级的z-index

总结：同级的z-inde其实很好理解并不复杂，但当同一级别的多个元素，它们的内部还有多个元素，并且这些元素都设置了z-index就有点复杂了，简单来说，上图的Element #1和Division Element #3，根据z-index的设置，绿色div在红色div之上，但它们内部的子孙元素，比如Division Element #1-1和Division Element #4，哪怕黄色div的z-index比蓝色div高，蓝色div仍然在黄色div之上，这是因为它们的父级已经定好了层级，就是说，父级的计算优先级是比自己要高的，这不同于css选择器的求和计算方式。