横幅图片无法占满视口且不可见，需显示在Navbar后方的技术求助

核心调整方向 #

要实现图片铺满视口且处于Navbar后方，需从定位层级、尺寸控制、默认样式重置三个维度调整：

1. 重置全局默认样式 #

浏览器默认的html、body边距会导致图片无法完全贴合视口，先做全局重置：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免出现横向滚动条 */
}

2. 横幅图片容器样式配置 #

假设你的横幅容器是<div class="hero-banner">，给它设置以下样式：

.hero-banner {
  position: fixed; /* 若页面滚动后希望图片固定，用fixed；随页面滚动则用absolute */
  top: 0;
  left: 0;
  width: 100vw; /* 强制占满视口宽度 */
  height: 100vh; /* 强制占满视口高度 */
  z-index: -1; /* 让容器处于Navbar下方，确保Navbar的z-index值更大 */
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并铺满容器，避免拉伸变形 */
}

3. Navbar层级控制 #

确保Navbar的层级高于横幅容器，示例样式：

.navbar {
  position: relative; /* 必须设置定位属性，z-index才会生效 */
  z-index: 10; /* 数值只需大于横幅容器的z-index即可 */
}

4. 排查隐藏问题 #

• 若图片仍不可见，检查容器是否被其他元素的overflow: hidden遮挡，或是否误设display: none；
• 路径验证无误后，可通过浏览器开发者工具的「Elements」面板查看图片元素是否存在，「Network」面板确认图片请求是否成功加载。

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