如何仅用CSS将嵌套div固定在视口左上角（不受祖先干扰）

当常规的fixed定位写法失效时，核心原因是：如果元素的祖先拥有backdrop-filter（或transform、perspective、filter等属性且值不为none），该祖先会成为fixed元素的包含块，此时fixed元素会相对于这个祖先定位，而非视口，自然无法对齐视口左上角。

由于你无法控制祖先样式，也不能使用JavaScript，这里提供一个通用的CSS解决方案，利用视口单位和百分比差值抵消祖先的偏移：

.fake-root {
  position: fixed;
  top: 0;
  left: 0;
  /* 抵消祖先的水平偏移，让元素左边缘对齐视口左边缘 */
  margin-left: calc(100% - 100vw);
  /* 如果祖先存在垂直偏移，添加此行抵消垂直方向偏移 */
  /* margin-top: calc(100% - 100vh); */
}

原理说明 #

• 100%：代表fixed元素所在包含块（即带有backdrop-filter的祖先）的宽度/高度
• 100vw/100vh：代表视口的宽度/高度
• calc(100% - 100vw)：计算出包含块相对于视口的水平偏移量的负值，通过margin-left设置后，就能让元素的左边缘精准对齐视口左边缘；垂直方向同理。

这个方法无需了解祖先的具体尺寸或偏移数值，不管祖先是否居中、是否有边距，都能让元素固定在视口左上角。

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