三个子盒子会重叠怎么处理，<template> <div class="mmz-content"> <div class="top"> </div> <div class="middle"> </div> <div class="bottom"> </div> </div> </template> <style lang="scss" scoped> .mmz-content { position: relative; .top { position: absolute; height: 20%; width: 100%; background-color: red; } .middle { position: absolute; height: 40%; width: 100%; background-color: lawngreen; } .top { position: absolute; height: 40%; width: 100%; background-color: dark; } } </style>

在这个例子中，由于三个子盒子的定位都是绝对定位，所以它们会重叠在一起。为了解决这个问题，可以给每个子盒子设置不同的 z-index 属性，使其在 z 轴上产生分层效果。具体地，可以将顶部子盒子的 z-index 设置为 3，中间子盒子的 z-index 设置为 2，底部子盒子的 z-index 设置为 1，如下所示：

<template>
  <div class="mmz-content">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</template>

<style lang="scss" scoped>
.mmz-content {
  position: relative;
  .top {
    position: absolute;
    height: 20%;
    width: 100%;
    background-color: red;
    z-index: 3;
  }
  .middle {
    position: absolute;
    height: 40%;
    width: 100%;
    background-color: lawngreen;
    z-index: 2;
  }
  .bottom {
    position: absolute;
    height: 40%;
    width: 100%;
    background-color: dark;
    z-index: 1;
  }
}
</style>

这样做可以保证每个子盒子都处于不同的图层，从而避免它们重叠在一起。