HTML/CSS中z-index失效时如何将指定图片置于其他图片上层

问题根因排查&解决方案 #

你遇到的z-index不生效的问题，基本都是层叠上下文被意外创建导致的，按以下顺序排查即可解决：

• 首先排查全局样式是否有覆盖规则：给#oyster的CSS规则临时加上z-index: 999 !important;，如果生效说明你其他位置的CSS规则优先级更高，覆盖了你写的z-index设置，找到对应规则删除即可。
• 检查你定义的slideup动画：如果动画中用到了transform、opacity（值小于1）、filter这类属性，会自动为元素创建新的层叠上下文，此时可以给#oyster额外加一行transform: translateZ(0);主动触发硬件加速，提升元素的层叠优先级。
• 确认父容器没有层叠上下文干扰：检查.bar-container的上层父元素，是否有设置position为非static值同时设置了z-index，或者设置了transform、opacity等属性，这类属性都会创建独立层叠上下文，导致子元素的z-index只在父容器内部生效。
• 兜底解决方案：直接调整HTML中元素的排列顺序，把#oyster的img标签放到三个wave标签的后面，同等层叠等级下HTML中后出现的定位元素会默认覆盖前面的元素，代码示例如下：

<section class="bar-container">
      <img class="waves" id="wave-1">
      <img class="waves" id="wave-2">
      <img class="waves" id="wave-3">    
      <img id="oyster">
      <div class="progression-bar">
             some stuff
      </div>
</section>

内容的提问来源于stack exchange，提问作者Kody_MvRick