CSS图片重叠固定导航栏：设置z-index无效求助

你的问题出在三个地方：标签选择器错误、重复设置position属性，以及没给固定导航栏设置足够高的z-index。

先看你写的CSS问题：

• 标签名写错了，HTML里的图片标签是<img>，不是image，所以你的CSS选择器根本没生效；
• 重复写了position:relative和position:absolute，后面的属性会覆盖前面的，等于只设置了absolute；
• 只给图片设z-index没用，固定导航栏本身的层级没明确指定，自然会被图片压在下面。

正确的解决步骤： #

1. 修正图片的CSS（根据布局需求选position值，不要重复设置）：

img {
  position: relative; /* 或者absolute，二选一即可 */
  z-index: 1;
}

2. 给固定导航栏设置更高的z-index值，确保它的层级比图片高：

/* 替换成你导航栏实际的选择器，比如类名或ID */
.navbar {
  position: fixed;
  z-index: 999; /* 这个数值只要比图片的z-index大就行，999是常用的安全值 */
  /* 其他导航栏样式：宽度、背景色等 */
}

这样设置后，滚动页面时导航栏就会始终显示在图片上方了。

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