vue3如何自己定义盒子布局不跟随父容器

在Vue3中，可以使用CSS的position属性来实现盒子布局不跟随父容器。具体实现方式如下：

1. 在盒子组件的样式中设置position为absolute或fixed，同时设置top、left、right、bottom属性来控制盒子的位置。

.box {
  position: absolute;
  top: 50px;
  left: 50px;
}

2. 在父容器组件的样式中设置position为relative，这样子元素的定位就会以父容器为基准。

.parent {
  position: relative;
}

3. 在模板中嵌套盒子组件和父容器组件，盒子组件的样式就可以不受父容器的影响了。

<template>
  <div class="parent">
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style>
.parent {
  position: relative;
}

.box {
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>
``