背景

最近做的小程序，有个吸顶的功能，之前没有仔细看，现在才看出来有个地方有问题
就是滑动的节点，有部分文字穿透出吸顶元素了
图中的月字就是从滑动的元素上穿透出来的文字

问题排查

1. 首先我虽然给需要吸顶的元素设置了position: sticky，但是没有设置z-index，因为是个普通列表，没有涉及定位跟层级问题，所以就没有设置吸顶元素的层级
2. 通过定位该穿透出来的文字，发现我给设置了一个transform：translateY(4%)
3. 当我把位移注释掉之后发现，文字穿透消失了，所以可以确定是transform导致的层级问题

解决

1. 给吸顶元素设置z-index
2. 或者把transform的位移使用其他方式实现，比如margin、padding、line-height
3. 最后给个为什么transform会导致层级问题的链接
   z-index和transform,你真的了解吗？ - reaf - 博客园 (cnblogs.com)