1. 當(dāng)祖父元素是relative定位, 父元素是absolute定位, 子元素也是absolute定位

<script setup></script>

<template>
  <div class="relative">
    <p class="absolute1">absolute1
      <p class="absolute2">absolute2</p>
    </p>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.relative {
  position: relative;
}
.absolute1 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: blue;
}
.absolute2 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: blueviolet;
}
</style>

最小輩分的元素的absolute定位是相對(duì)于離得最近的父輩元素偏移的, 如下圖所示:

如果absolute1是fixed定位呢?

<script setup></script>

<template>
  <div class="relative">
    <p class="absolute1">absolute1
      <p class="absolute2">absolute2</p>
    </p>
   
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.relative {
  position: relative;
}
.absolute1 {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 10px;
  top: 10px;
  background-color: blue;
}
.absolute2 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: blueviolet;
}
</style>

可以發(fā)現(xiàn)就算父輩元素absolute1是fixed定位, absolute2還是相對(duì)于最近的父輩元素absolute1相對(duì)偏移的如下圖所示:

試著把父輩元素absolute1改為inherit, static等其他position的值, absolute2還是相對(duì)于absolute1偏移的

2. 如果absolute1和absolute2是兄弟元素,

就是兄弟各自是各自的定位, 再往上找父輩元素相對(duì)偏移

<script setup></script>

<template>
  <div class="relative">
    <p class="absolute1">absolute1</p>
    <p class="absolute2">absolute2</p>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.relative {
  position: relative;
}
.absolute1 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: blue;
}
.absolute2 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: blueviolet;
}
</style>

如果left,top,bottom,right一樣,一般就重合了,后面的元素蓋住前面的元素如圖所示:

綜上所述: 有position: absolute定位的元素都是找最近的父輩元素(有position:xxx定位的)進(jìn)行相對(duì)偏移的