Nuxt.js+Vuetify项目首次加载时Why Atlaz组件与上层组件重叠问题求解

问题根源 #

• 你使用了百分比单位的负margin，百分比margin的计算基准是父元素的实时宽度，再加上Vuetify的<v-img>组件默认开启懒加载：页面首次渲染时图片还未加载完成，无法撑开上层容器的正确高度，负margin的计算值出现偏差，导致重叠。滚动页面时触发了组件重排，此时图片已经加载完成，高度计算恢复正常，布局就自动修正了。
• CSS中添加的!important优先级过高，会覆盖Vuetify内置的布局计算逻辑，进一步加剧了布局错位的概率。

修复方案 #

方案1：提前占位图片高度（最推荐） #

给上层图片的外层容器固定最小高度，保证页面首次渲染时就能拿到正确的高度基准，修改模板代码如下：

<v-col xs="12" sm="12" md="7" lg="7" xl="7" style="min-height: 555px">
  <!-- 给v-img添加eager属性关闭懒加载，提前渲染图片 -->
  <v-img :src="require('~/assets/images/why-atlaz/1.png')" max-height="555" :eager="true" />
</v-col>

同时修改CSS代码，移除!important，如果需要更稳定的偏移效果可以用transform代替负margin：

.row-card-slider {
  margin-top: -45.8%;
}

@media only screen and (min-width: 1904px) {
  .row-card-slider {
    margin-top: -41%;
  }
}

方案2：延迟渲染卡片组件 #

等页面DOM完全渲染、高度计算完成后再加载Why Atlaz卡片组件，避免初始渲染的高度计算偏差：
首先在组件的script部分添加挂载判断：

export default {
  data() {
    return {
      isDomReady: false
    }
  },
  mounted() {
    // 等待DOM全部渲染完成后再显示卡片
    this.$nextTick(() => {
      this.isDomReady = true
    })
  }
}

然后给卡片所在的v-row添加渲染判断：

<v-row justify="end" class="row-card-slider" v-if="isDomReady">
  <!-- 原有卡片代码 -->
</v-row>

其他优化建议 #

• 尽量避免使用!important修改布局类样式，优先通过CSS选择器优先级调整样式。
• 百分比偏移适配多分辨率容易出现错位，可以结合响应式断点设置不同的固定偏移值，稳定性更高。

内容的提问来源于stack exchange，提问作者Tejo Prabowo