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