Vue3.x + Vite2.x 入门实战 04：不管怎么设置z-index值，元素层级仍然不对

编写页面布局时，必定会碰到的问题，不管怎么设置z-index值，元素都被挡住。原因：没有真正理解CSS层叠样式是啥

概要内容

• 元素层级不对情况
• 解决层级不对方案
• 总结

元素层级不对情况

示例

• html

  <section class="content">
  	<div class="modal"></div>
  </section>
  
  <div class="side-tab"></div>
  

• css

  .content {
  		position: relative;
      z-index: 1;
  
  	.modal {
  	    position: absolute;
  	    z-index: 100;
  	}
  }
  
  .side-tab {
      position: absolute;
      z-index: 5;
  }
  

效果

• 遮挡情况

• 正常情况

---

解决层级不对方案

方案一：

• 步骤1：遮挡元素和被遮挡元素，调整到相同父节点下

• 步骤2：调整z-index值

• 示例

  • html

  <section class="content">
  </section>
  
  <!-- modal 移出来放到同级, z-index 就生效了 -->
  <div class="modal"></div>
  
  <div class="side-tab"></div>
  

  • css

  .content {
  		position: relative;
      z-index: 1;
  
  	.modal {
  	    position: absolute;
  	    z-index: 100;
  	}
  }
  
  .side-tab {
      position: absolute;
      z-index: 5;
  }
  

方案二：

• 步骤1：去掉被遮挡的父元素postion熟悉
• 步骤2：调整z-index值
• 示例

  • html

    <section class="content">
    	<div class="modal"></div>
    </section>
    
    <div class="side-tab"></div>
    

  • css

    .content {
    		//position: relative;
        z-index: 1;
    
    	.modal {
    	    position: absolute;
    	    z-index: 100;
    	}
    }
    
    .side-tab {
        position: absolute;
        z-index: 5;
    }
    

总结

先按元素先后顺序层叠摆放，再按z-index属性调整层级次序叠放

• CSS是层叠样式
  • 无postion时，元素按先后顺序一层一层叠放绘制的
  • 有postion时，可通过z-index 调整同级元素的层级
  • 子元素要想突破父元素层叠限制，请删除父元素postion 属性
• 感悟：接触CSS就应该先搞懂层叠是个啥玩意儿，不然层级问题会搞得你摸不着头脑。贴个chrome layer图（Chrome位置：More tools/layers）

参考文献：

• 4 reasons your z-index isn’t working (and how to fix it)

---

以上: 如发现有问题，欢迎留言指出，我及时更正