vue.js 中组件之间的重叠答案

【问题标题】：overlapping between components in vue.jsvue.js 中组件之间的重叠
【发布时间】：2022-07-06 18:39:33
【问题描述】：

我写了这段代码，我有绝对位置的背景图像，当我运行代码时，这个组件和其他组件之间有重叠，我不知道为什么，有什么帮助吗？

<template>
    <v-container>
     
        <div >
        <v-row justify="center" no-gutters>
          <p class="title-steps pb-4">{{ title }}</p>
        </v-row>
        </div>
       
        <div  justify="center" no-gutters  >
            <v-row   class="background-ligne">
            </v-row>
        </div>
        
      
    </v-container>
</template>
<script>
export default {
  data: () => ({
    title: "Start saving in 4 easy steps",
  }),
};
</script>
<style scoped>
.title-steps {
  font-size: 45px;
  font-family: "Nunito" !important;
  color: rgb(130, 8, 187);
}
.background-ligne{
 background-image: url(../assets/Steps-background.svg);
  position:absolute;
  height: 20%;
  width: 100%;
}
</style>```

【问题讨论】：

标签： javascript css vue.js frontend web-deployment

【解决方案1】：

这可能是因为您为.background-ligne 类赋予了position:absolute 属性。有了这个，您不会像您在问题中所说的那样定位背景绝对值，而是整个 div。因此 div 将相对于第一个父级以相对位置进行绝对定位，而不会干扰其他元素。因此它可能与其他元素重叠。见CSS Layout - The position Property

如果要定位背景，需要使用background-position 属性see docs。

希望这会有所帮助。

【讨论】：