本文详解初学者常见的 css 层叠（z-index）与定位问题：当为页面设置全屏背景图后导航栏消失，本质是元素堆叠顺序错误；通过合理使用 `position`、`z-index` 和现代布局方案（如 flexbox），可轻松解决。
在你提供的代码中，.bg-img（实际为空
）虽未设置 background-image，但其父容器 .bg-container 内部的样式逻辑存在关键矛盾：你试图用一个空 div 模拟背景图，却未真正赋予它背景，反而在 .bg img 选择器中错误地添加了 background-image —— 而✅ 正确做法：背景图 + 导航栏分层控制
最简洁可靠的方案是将背景图设为
的 CSS 背景，并确保导航栏具有更高堆叠层级：
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: url('./images/castle.png') no-repeat center/cover;
min-height: 100vh; /* 确保背景覆盖视口高度 */
font-family: Arial, sans-serif;
}
.topnav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 14px 20px;
position: relative; /* 或 fixed，实现吸顶效果 */
z-index: 1000; /* 显式提升层级，确保压过背景 */
color: white;
}
.topnav a {
color: crimson;
text-decoration: none;
padding: 12px 16px;
font-size: 17px;
border-radius: 4px;
transition: background-color 0.2s;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}对应 HTML 结构（精简清晰，语义化）：
<body>
<nav class="topnav">
<h1>Welcome to my page</h1>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>
</body>⚠️ 关键注意事项
- z-index 仅对 position 值为 relative、absolute、fixed 或 sticky 的元素生效：你原代码中 .topnav 虽设了 z-index: 1，但 position: relative 默认不触发层叠上下文，需确保其有定位属性（已修正为 position: relative）。
- 避免滥用绝对定位：原 .bg-container 和 .container 均设为 absolute，导致脱离文档流、难以响应式适配。现代开发推荐用 body 背景 + Flexbox 布局，更稳定可控。
- 图片路径检查：确认 ./images/castle.png 路径正确，建议先用在线图片 URL 测试（如 https://via.placeholder.com/1200x800?text=Castle）排除资源加载失败问题。
- 移动端适配：加入 后，可进一步用媒体查询实现响应式导航（如汉堡菜单），但当前结构已兼容基础缩放。
✅ 总结
导航栏“消失”不是 bug，而是 CSS 堆叠与定位规则的自然结果。核心解决思路只有三点：
① 将背景图设为 body 或专用容器的 background-image（而非误用于 ）；
② 给导航栏添加 position: relative/fixed 并设置足够高的 z-index（如 1000）；
③ 优先采用 Flexbox 替代浮动（float）布局，提升可维护性与响应能力。
掌握这三点，你不仅能修复当前问题，更将迈出 CSS 布局进阶的关键一步。
