vue3中父div设置display flex，2个子div重叠

susu10830189112024-11-24 1:02

在Vue 3中，若要设置父div使用flex布局并且使得2个子div重叠，可以在父div上使用样式display: flex以及position: relative，然后在子div上使用position: absolute来定位。

复制代码

<template>
  <div class="parent">
    <div class="child child1">Child 1</div>
    <div class="child child2">Child 2</div>
  </div>
</template>
 
<script>
export default {
  // Vue 3 组件选项
};
</script>
 
<style>
.parent {
  display: flex;
  position: relative;
  width: 100%;
  height: 200px; /* 父div的高度 */
}
 
.child {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.child1 {
  background-color: red;
}
 
.child2 {
  background-color: blue;
  /* 将第二个子div向右移动，以显示出重叠效果 */
  right: 0;
}
</style>

父div设置了display: flex来使用flexbox布局。两个子div通过position: absolute被绝对定位于父div的同一位置，并且通过right: 0属性使得第二个子div被推到了父div的右侧，从而实现重叠