[CSS 入门到进阶] 用 transform 后 z-index 失效了？总结 transform 的注意事项！
![[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！](https://static001.geekbang.org/infoq/9a/9a08092226a55846ce40608f75b48499.jpeg)
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
背景
这篇文章，我讲了如何实现自适应屏幕宽度的 canvas：《如何实现响应式 canvas？保持 canvas 比例？教你让 canvas 自适应屏幕宽度！》，其中 canvas 的缩放依赖了transform这个 CSS 属性。
transform是指针对元素做一些 2D/3D 转换，本文讲解相关注意事项。
它在 dom 元素占据的位置，是变换前的形状和大小
transform的很多变换，都会修改 dom 元素的形状。
我们知道，transform只能作用于盒子模型的元素上，通常我们接触的都是盒子模型，例如display: block。
而这些元素，初始都是矩形，并且很正（是横平竖直的矩形）。
变换后，可能经过了旋转、拉伸，可能就变成了歪歪的平行四边形。
而 transform 变换后，该元素在 dom 中所占据的位置，是不会变换的！
也就是说，如果被 transform 变换的元素 A，如果它后面有其它元素 B，那么不管你咋变换 A，B 的位置是不会受影响的。这样 DOM 渲染效率就会高。
想想，为什么这么设计？
设想这样的情景：transform 可以结合动画使用。如果你放了一个一直在旋转的矩形，那么它在 y 轴撑开的高度每时每刻都在改变，让它后面所有元素随着动画改变 y 坐标的话，就需要修改太多次了，严重影响性能。因此，transform 变换后，元素在 dom 中所占据的位置，是不会变换的。
参考例子：
它的展示效果，会覆盖在其它元素上，无论其它元素 z-index 多大
参考例子：
这是因为 层叠上下文 (Stacking Context)，当你给一个元素设定了transform属性，它就是“高人一等”，会覆盖在其它没有transform元素的上面，无论其它元素的z-index有多大。
文档中的层叠上下文由满足以下任意一个条件的元素形成：
文档根元素（
<html>）；position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；opacity属性值小于1的元素（参见 the specification for opacity）；mix-blend-mode属性值不为normal的元素；以下任意属性值不为
none的元素：isolation属性值为isolate的元素；will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。
放缩、旋转等涉及「中心点」的变换，默认选元素正中心为「中心点」，可通过 transform-origin 修改
例如scale，默认是以中心来放大缩小的。也就是说，放缩前后：中心点位置不变。
通常针对scale，我们会习惯设置transform-origin为top或者top left，分别是以顶部中间为中心、以左上角为中心。
易踩坑的点: 0.5px 分割线
如果你希望实现 0.5px 的分割线，并且这个分割线是用 div 实现的。你可能这么写：
但这样不对，因为它只是 UI 展示了 0.5px 高度，其实它依然是占据了 1px 的高度（参考第一点注意事项）。分割线跟其下方的其它元素的距离会有 0.25px 的误差（参考第三点注意事项）。
所以你最好这么写 0.5px 的分割线：
但凡你是个追求极致的人，或者你的设计师是个追求极致的人，都容易发现这 0.5px 的误差。不要被坑啦！如果你有收获，麻烦点个免费的赞噢，感谢！
写在最后
我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
版权声明: 本文为 InfoQ 作者【HullQin】的原创文章。
原文链接:【http://xie.infoq.cn/article/0d96d38800e50145307cd02fa】。文章转载请联系作者。
公众号【线下聚会游戏】 2020.10.07 加入
game.hullqin.cn 我做了一些联机桌游网页：支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！
![[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！_CSS_HullQin_InfoQ写作社区](https://static001.infoq.cn/static/infoq/img/logo-121-75.yuij86g.png){kind=logo}
评论