只能说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/

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.