记录一次fixed布局失效问题

发表于 更新于 分类于 ， ， 阅读次数：

接触前端开发快十年了，关于fixed布局，脑海里根深蒂固的想法就是相对于视口进行定位。但实际上，祖先元素的某些属性会改变fixed元素的定位基准。

起因

项目中有个场景（先别管合不合理。。。），某表格中每行中都有一列使用了插槽，插槽中隐藏了一个modal弹窗。这些弹窗通过position: fixed定位到窗口正中间。中间一直都是正常的，直到某天升级了表格组件以后，弹窗的定位发生了错乱，原先基于整个页面的定位现在变成了基于表格的定位。

解决

经过新旧两个版本的dom元素逐个比对，最终发现，引起这一问题的原因在于表格组件的新版本，某个父级元素上设置了tansfrom: translate(0, 0);样式，去掉这行样式后定位恢复正常。

原因

  • 如果 position 属性是 fixed，在连续媒体的情况下 (continuous media) 包含块是 viewport ,在分页媒体 (paged media) 下的情况下包含块是分页区域 (page area)。

  • 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

    1. transform 或 perspective 的值不是 none
    2. will-change 的值是 transform 或 perspective
    3. filter 的值不是 none 或 will-change 的值是 filter（只在 Firefox 下生效）
    4. contain 的值是 layout、paint、strict 或 content
    5. backdrop-filter 的值不是 none

MDN文档见 布局和包含块 - CSS：层叠样式表 | MDN