网页动画中图片重叠时层级错误，如何指定哪张图片置于顶层

• 首先确认需要调整层级的图片元素已设置非static的定位属性，position: relative是最常用的选择，不会改变元素原有布局位置，是调整层级的前置条件。
• 给需要置于顶层的图片设置更高的z-index属性值，同一堆叠上下文内z-index数值越大，元素层级越高，示例样式：

  /* 顶层图片样式 */
  .target-top-img {
    position: relative;
    z-index: 999; /* 数值高于其他重叠图片即可 */
  }
  

• 注意常见层级失效场景：如果两张图片归属不同的父容器，需要优先调整父容器的z-index属性，父容器层级低的情况下，子元素设置再高的z-index也无法超过更高层级父容器内的元素。
• 如果是动画过程中需要动态切换层级，可通过JS直接修改元素的z-index值，示例：

  // 动画触发时调整层级
  document.querySelector('.target-img').style.zIndex = '999'
  

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