父元素未设position:relative时，绝对定位元素的参照对象是什么？

我正在制作一个鼠标悬停触发的3D展开效果卡片，要求Donald Duck元素定位在卡片的右下角。当为.card设置position:relative属性时，设置了position:absolute的.role元素能正确定位在卡片右下角；但移除该属性后，.role的定位出现异常。想请教此时.role{position:absolute}是相对于什么元素进行定位的？

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
    </head>

    <body>
        <head>
            <h1>Donald Duck 3D Expansion Card</h1>
        </head>

        <main>
            <div class="wrap">
                <div class="card">
                    <div class="bg">
                        <img src="images/Background.png" />
                    </div>
                    <div class="role">
                        <img src="images/Donald_Duck.png" />
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>

style.css #

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wrap {
    width: 100%;
    height: 100vh;
    border: 1px solid gold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width: 528px;
    height: 792px;
    border: 1px solid red;
    position: relative;
}

.bg {
    width: 528px;
    height: 792px;
    border-radius: 20px;
    overflow: hidden;
    transform-origin: bottom;
    transition: 1s;
    perspective: 1000px;
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.role {
    width: 326px;
    height: 460px;
    position: absolute;
    bottom: -1px;
    right: -1px;
    transform-origin: bottom right;
    transition: 1s;
}

.role img {
    width: 100%;
    height: 100%;
}

.card:hover .bg {
    transform: rotateX(30deg) skewX(-20deg);
}

.card:hover .role {
    transform: scale(1.3);
}

效果对比 #

• 设置.card { position: relative}时：Donald Duck正确定位在卡片右下角，鼠标悬停3D展开效果正常
• 移除.card { position: relative}时：Donald Duck定位异常，不再依附卡片右下角

当你移除.card的position:relative后，.role这个绝对定位元素会向上查找最近的、设置了非static定位（即relative/absolute/fixed/sticky）的祖先元素作为定位参考。

在你的代码结构里，.card的父元素.wrap用的是默认的static定位（没有显式设置其他定位属性），所以会继续向上遍历，最终找到<body>元素（如果<html>也没设置非static定位的话）。这就导致.role的bottom: -1px和right: -1px是相对于视口/<body>的右下角来定位，自然就偏离了卡片的位置。

总结：绝对定位元素的参考对象是离它最近的、定位属性不为static的父级或祖先元素，如果找不到符合条件的元素，就会相对于初始包含块（通常是视口）定位。

内容的提问来源于stack exchange，提问作者PineapplePie