position: fixed 为什么不固定了:包含块实测与排查
给博客的手机菜单做右侧抽屉时,一个 position: fixed、top 和 bottom 都是 0 的抽屉,只要写在顶栏里面就只有 64px 高,顶栏向上收起时还会被一起带走——毛玻璃用的 backdrop-filter 让顶栏成了它的包含块。本文先说明 fixed 元素的包含块什么时候不再是视口,再用 Chrome 154 实测 20 种写法:transform、translate、filter、backdrop-filter、perspective、will-change: transform、contain、content-visibility 会“截胡”,opacity、isolation、mix-blend-mode、z-index、container-type 只建立层叠上下文、不会截胡;全站置灰的滤镜放在 html 上安全,放在 body 上会让所有 fixed 元素跟着页面滚走。最后给出用 offsetParent 一行找到“截胡者”的排查方法,以及挪出 DOM、把属性挪到伪元素上两种修法。