原因:
当定位元素的 'z-index' 未设置时（默认为 auto），设置 opacity 属性将会创建一个新的局部层叠上下文(z-index)。
解决方案:
1. 既然 z-index 未设置触发, 那么就在用 opacity 属性时对元素进行 position + z-index 的设置
2. 既然用 opacity 会触发bug, 那么迂回一下, 避免用这个属性, 换成类似的, 比如 rgba(100,100,100, .5)
相关阅读:
可视化格式模型( visual formatting model )
堆叠上下文( zindex )
透明度( transparency )
学习方法:
前端 bug 的解决一般分这几个阶段:
1. 自查代码, 排除影响因素
抽离出最小 bug 代码, 构造干净环境, 进行复现
二分法找出环境影响
2. 抽象出具体的 bug 表述, 以便进行查询和问询
比如该例中, 可以归结出原因是 opacity + z-index
3. 知道上哪去寻找答案
a. google
d. 同事
以我个人经验来说, 一般 stackoverflow 就是技术问题归宿, 只要找对关键词, 都能得到答案.
问题扩展:
1. 此问题影响面, 请测试所有浏览器
2. 阅读引用资料, 自行总结产生局部层叠上下文的其他情况, 以便工作中避免
3. 总结 opacity 的兼容性, 设透明度的兼容做法
4. opacity 的继承特性, 对内部文字的影响(case: 容器半透明, 文字不透明, 如何写兼容的 css)