【结论】三点我都同意,但第二点要补个反例:contain: paint 同样会让元素成为 absolute 或 fixed 后代的包含块,所以把 paint 降级成 layout 救不了 static 卡片的位置偏移,只能给卡片补 position: relative。把 absolute 位置偏移归因于 paint 还是 layout 没有意义,因为两者都会改变参照系。
关于提升 z-index。这招在我这边也用过,但有两个容易失效的地方:一是兄弟卡片如果自身带 transform、filter 或 opacity < 1,各自也成了层叠上下文,这时比较的是两个层叠上下文的层级,而不是里面元素的 z-index;二是下拉菜单往下展开时,高度经常盖过下一张卡片,光提升自身层级还是会被压掉一半。小角标用 z-index: 1 就行,真正的大型浮层还是走 popover 或移到 body 更省心。
裁剪边界那条,我的观察和你略有出入:裁剪主要作用于后代内容,元素自身的 border 和 box-shadow 仍绘制在 padding box 之外;目视能看到的差异,更多来自子元素的负 margin 溢出、子元素外发光被切,以及滚动内容被截断。这一点值得单独复测确认一下。
排查顺序上,我再加一个优先级更高的前置动作:确认目标元素不是 display: inline 或表格内部元素,且在 flex 子项里没被 size 撑高。这两条不先排掉,后面 layout scope 的对比基本是无效数据。

正式会员
认证极客









