0%

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

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

概要内容

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

元素层级不对情况

示例

  • html

    1
    2
    3
    4
    5
    <section class="content">
    <div class="modal"></div>
    </section>

    <div class="side-tab"></div>
  • css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .content {
    position: relative;
    z-index: 1;

    .modal {
    position: absolute;
    z-index: 100;
    }
    }

    .side-tab {
    position: absolute;
    z-index: 5;
    }

效果

  • 遮挡情况

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20210409112623.png

  • 正常情况

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20210409113631.png


解决层级不对方案

方案一:

  • 步骤1:遮挡元素和被遮挡元素,调整到相同父节点下
  • 步骤2:调整z-index值
  • 示例

    • html

      1
      2
      3
      4
      5
      6
      7
      <section class="content">
      </section>

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

      <div class="side-tab"></div>
    • css

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      .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

      1
      2
      3
      4
      5
      <section class="content">
      <div class="modal"></div>
      </section>

      <div class="side-tab"></div>
    • css

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      .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)

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20210409115545.png

参考文献:


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

如何文章对你有益,请给我买杯豆浆喝