[CSS入门到进阶] 用transform后z-index失效了?总结transform的注意事项!

本文介绍了CSS transform属性在影响元素布局及层叠上下文方面的一些关键点。当使用transform进行旋转、放缩等操作时,元素在DOM中的位置不变,但展示效果会覆盖其他元素,即使这些元素的z-index更高。同时,transform默认以元素中心为变换原点,可使用transform-origin调整。此外,文章提醒读者注意0.5px分割线在不同transform变换下可能出现的显示问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

背景

这篇文章,我讲了如何实现自适应屏幕宽度的canvas:《如何实现响应式canvas?保持canvas比例?教你让canvas自适应屏幕宽度!》,其中canvas的缩放依赖了transform这个CSS属性。

transform是指针对元素做一些2D/3D转换,本文讲解相关注意事项。

它在dom元素占据的位置,是变换前的形状和大小

transform的很多变换,都会修改dom元素的形状。

我们知道,transform只能作用于盒子模型的元素上,通常我们接触的都是盒子模型,例如display: block

1.png

而这些元素,初始都是矩形,并且很正(是横平竖直的矩形)。

变换后,可能经过了旋转、拉伸,可能就变成了歪歪的平行四边形。

而transform变换后,该元素在dom中所占据的位置,是不会变换的!

也就是说,如果被transform变换的元素A,如果它后面有其它元素B,那么不管你咋变换A,B的位置是不会受影响的。这样DOM渲染效率就会高。

想想,为什么这么设计?

设想这样的情景:transform可以结合动画使用。如果你放了一个一直在旋转的矩形,那么它在y轴撑开的高度每时每刻都在改变,让它后面所有元素随着动画改变y坐标的话,就需要修改太多次了,严重影响性能。因此,transform变换后,元素在dom中所占据的位置,是不会变换的。

参考例子:

码上掘金

它的展示效果,会覆盖在其它元素上,无论其它元素z-index多大

参考例子:

码上掘金

这是因为 层叠上下文 (Stacking Context),当你给一个元素设定了transform属性,它就是“高人一等”,会覆盖在其它没有transform元素的上面,无论其它元素的z-index有多大。

文档中的层叠上下文由满足以下任意一个条件的元素形成:

放缩、旋转等涉及「中心点」的变换,默认选元素正中心为「中心点」,可通过transform-origin修改

例如scale,默认是以中心来放大缩小的。也就是说,放缩前后:中心点位置不变。

通常针对scale,我们会习惯设置transform-origintop或者top left,分别是以顶部中间为中心、以左上角为中心。

易踩坑的点: 0.5px分割线

如果你希望实现0.5px的分割线,并且这个分割线是用div实现的。你可能这么写:

<div class="divider"></div>
.divider {
  height: 1px;
  transform: scaleY(0.5);
  background-color: gray;
}

但这样不对,因为它只是UI展示了0.5px高度,其实它依然是占据了1px的高度(参考第一点注意事项)。分割线跟其下方的其它元素的距离会有0.25px的误差(参考第三点注意事项)。

所以你最好这么写0.5px的分割线:

.divider {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  margin-bottom: -0.5px;
  background-color: gray;
}

但凡你是个追求极致的人,或者你的设计师是个追求极致的人,都容易发现这0.5px的误差。不要被坑啦!如果你有收获,麻烦点个免费的赞噢,感谢!

写在最后

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

CSS的z-index属性失效时,有几个可能的原因可以导致这个问题。首先,CSS3 3D变换可能会影响z-index的表现,这时你需要调整元素的transform-style属性或使用其他技术来控制元素的层叠顺序。 其次,父元素的z-index值可能会影响子元素的层叠顺序。请确保父元素的z-index值没有覆盖子元素的z-index值。 另外,当父元素的position属性为relative,子元素的position属性为absolute时,z-index可能失效。如果无法修改父元素和子元素的position属性,可以尝试将z-index值设置为负值。 综上所述,当CSS的z-index属性失效时,可以通过检查这些可能的原因,并逐一解决它们来解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS3中z-index不生效怎么办?](https://blog.youkuaiyun.com/weixin_43160662/article/details/131427256)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [css z-index无效](https://blog.youkuaiyun.com/weixin_43478592/article/details/115394398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hull Qin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值