在无法调整z-index的情况下将网页元素置于顶部或底部

Author Avatar
st 2020年08月29日
  • 在其它设备中阅读本文章

只能说stackoverflow还是NB。

先来点碎碎念。

最近有个收拾烂摊子的项目,大概情况是朋友请了人做个网上商店,主要功能是用户可以自定义商品然后自助下单,程序员做了一半然后开始拖,拖了几个月跑路了。我接手的时候主要功能其实看着都没啥问题了,只有总价计算稍微有点不正常,想想应该问题不大,结果看到之前那人的代码我傻了,这小子自定义JS的文件名取的是myNewJs.js,同一个目录里头还有个没用上的myJs.js,我说不出话来。

一个建议,没啥耐心的人可千万别接这种活,能做一半跑路的,代码八成也是一团乱。朋友也挺NB的,他自己居然不知道价格计算的公式,我接了活前两天就光在看代码,好不容易才把价格公式搞明白,几乎把所有价格计算相关的代码全都重写了才把功能修好。

不过这个不是这次的重点,功能好了过后我开始着手外观上的修修补补,有一个页面的下拉菜单永远会被别的内容挡住,改z-index一点反应没有。我研究了半天stack context也没发现问题出在哪,顺带一提,有个叫z-context的chrome插件,做相关分析很好用。应该是之前那人的代码里把别的什么东西置于顶部了,没考虑到下拉菜单。本来是应该重写那部分代码的,但我根本找不到,也没时间去全部重写,只能找别的解决方案了。

搜了半天,找到一个stackoverlow的问题Why can't an element with a z-index value cover its child?,里面有个很有意思的解决方案。实现方式是用CSS的3D变换把div提起来或者压下去,甚至不用动js。
总共就加两行代码:给要调整的元素的父元素加上transform-style: preserve-3d;,给要调整的元素加上transform:translateZ(1px);

虽然不是什么best practice,真要说的话大概都能算worst practice了,不过至少能用。而且这个方案只能把元素放在最顶上或者最底下,所以大多数时候也不太实用,也就能用在下拉菜单或者背景图片之类的上面了。

本文链接:https://blog.stsecurity.moe/archives/116/
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.