前端position: absolute是相对于谁定位的?

1. 当祖父元素是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定位是相对于离得最近的父辈元素偏移的, 如下图所示:

如果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>

可以发现就算父辈元素absolute1是fixed定位, absolute2还是相对于最近的父辈元素absolute1相对偏移的如下图所示:

试着把父辈元素absolute1改为inherit, static等其他position的值, absolute2还是相对于absolute1偏移的

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

就是兄弟各自是各自的定位, 再往上找父辈元素相对偏移

<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定位的)进行相对偏移的