如何为切换后的动画logo设置z-index使其显示在其他图片上方？

核心前提 #

z-index 仅对定位元素生效，也就是元素的 position 属性必须设置为 relative、absolute、fixed 或 sticky，否则设置 z-index 不会有任何效果。

你的错误原因 #

你之前的脚本写法存在语法错误，把图片地址赋值和样式设置混在了一起；另外 JS 中操作样式时，z-index 的属性名是驼峰式的 zIndex（不是小写的 zindex）。

方案一：在脚本中直接设置 #

修改你的 changeimage 函数，先获取图片元素，再分别设置图片地址、定位属性和 z-index：

function changeimage() {
  const myImage = document.getElementById('myImage');
  // 切换为动画Logo
  myImage.src = 'images/animatedlogo.gif';
  // 设置定位（必须步骤，z-index才会生效）
  myImage.style.position = 'relative';
  // 设置z-index让它显示在上方
  myImage.style.zIndex = '100';
}

方案二：用CSS类控制（更易维护） #

先在CSS中定义一个控制层级的类：

.logo-top {
  position: relative;
  z-index: 100;
}

然后在脚本中切换图片的同时添加这个类：

function changeimage() {
  const myImage = document.getElementById('myImage');
  myImage.src = 'images/animatedlogo.gif';
  myImage.classList.add('logo-top');
}

额外说明 #

如果下方的图片本身也设置了 z-index，你需要把动画Logo的 z-index 值设得比它更大，才能确保覆盖在上方。

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