为何absolute元素的offsetParent是static父元素而非fixed祖父元素？

这是CSS规范里的明确规则：任何设置了transform属性（值不为none）的元素，都会成为其内部绝对/固定定位元素的包含块——哪怕该元素本身是默认的static定位，也会直接改变内部绝对定位元素的offsetParent指向。

在你的代码场景里：

• .parent设置了transform: translate3d(0, 0, 0)，哪怕这个变换在视觉上没有任何效果，它依然触发了包含块的创建逻辑。
• 内部的.child是absolute定位，此时会把创建了包含块的.parent当作offsetParent，而非原本符合“非static定位”要求的祖父元素.container。
• 当你禁用这个transform动画后，.parent不再满足创建包含块的条件，.child的offsetParent就回到了符合MDN定义的非static定位祖父元素.container。

补充说明：MDN里关于定位祖先的描述只是基础判定规则，实际上offsetParent的判定还会涉及其他能创建包含块的CSS属性，除了transform，perspective、filter、will-change: transform等属性也会触发同样的效果，这些规则是为了让变换元素内部的定位元素能相对于变换后的容器进行定位，避免定位逻辑混乱。

你的代码示例 #

JavaScript

const child = document.querySelector(".child");

console.log(getComputedStyle(child).position);
console.log(child.offsetParent.className);

CSS

.container {
  position: fixed;
}

.parent {
  transform: translate3d(0, 0, 0);
}

.child {
  position: absolute;
}

HTML

<div class="container">
  <div class="parent">
    <div class="child">
    </div>
  </div>
</div>

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