设置container-type:inline-size时，绝对定位元素在Chrome与Safari表现差异问题

问题背景 #

在布局开发中发现，Safari 18.2与Chrome 132.0.6834.84对绝对定位元素的定位基准判断存在显著差异：

• Chrome中，绝对定位元素以设置position: relative的祖父级div为包含块（符合预期）
• Safari中，绝对定位元素错误地以设置container-type: inline-size的父级元素为包含块

标准依据 #

根据CSS定位规范，绝对定位元素的包含块由最近的已定位祖先元素（即position属性值为relative/absolute/fixed/sticky的元素）决定。container-type: inline-size是容器查询特性，仅用于提供容器尺寸参考，并不具备改变定位上下文的作用。因此Chrome的行为符合标准，Safari的表现属于实现层面的bug。

兼容解决方案 #

方案1：显式声明父级元素的定位属性 #

给设置了container-type: inline-size的父级元素显式添加position: static（默认值），明确告知浏览器该元素不参与定位基准计算，让绝对定位元素正确向上查找position: relative的祖父元素：

.parent-element {
  container-type: inline-size;
  position: static; /* 修正Safari的错误识别逻辑 */
}

方案2：分离定位基准与容器查询元素 #

若DOM结构允许调整，可将container-type: inline-size的容器元素与position: relative的定位基准元素拆分，避免两者的上下文重叠，从根源上消除浏览器判断冲突。

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