本文针对 HTML 中 <h2>（或其它标题元素）文本不可见的问题，解析因 CSS 层叠、定位冲突、z-index 误用及高度限制导致的隐藏现象，并提供精简、健壮的修复策略。
本文针对 html 中 `
`（或其它标题元素）文本不可见的问题，解析因 css 层叠、定位冲突、z-index 误用及高度限制导致的隐藏现象，并提供精简、健壮的修复策略。
在实际开发中，标题（如 <h1>、<h2>）内容“莫名消失”并非罕见问题——它往往不是文本真的被删除，而是被 CSS 的视觉规则意外遮挡或移出视口。从你提供的代码可见：虽然 <h1> 和 <p> 元素已正确写入 HTML，但其内容未正常渲染，核心症结在于以下三类典型 CSS 误用：
? 1. z-index 的滥用引发层叠遮挡
你的 .nav、body、#welcome-section 和 .welcum 均设置了 z-index，但未配合 position: relative/absolute/fixed 形成有效层叠上下文。更关键的是：.nav 使用 position: fixed 且 z-index: 300，而 #welcome-section（含 <h1> 和 <p>）虽设 z-index: 1000，却未声明 position 属性（仅 display: block），导致 z-index 完全失效。此时 <h1> 实际位于默认层叠顺序（stacking context root），极易被固定导航栏覆盖或受父容器影响。
✅ 修复方式：
- 移除所有非必要 z-index（尤其对静态布局元素）；
- 若需确保内容层在导航之上，仅给 #welcome-section 添加 position: relative 即可激活其 z-index（无需设值，浏览器默认为 auto）；
- 避免全局 z-index 数值竞赛，优先通过 DOM 顺序和语义化结构控制层叠。
? 2. height: 100vh 导致内容被裁切
body { height: 100vh } 强制将 body 高度锁定为视口高度，但你的 <header id="welcome-section"> 设置了 margin-top: 160px，且 <h1> 又有 padding-top: 300px —— 这些垂直偏移会使内容整体下移，超出 100vh 范围，造成顶部大量空白、标题被“推”出可视区域。
立即学习“前端免费学习笔记（深入）”；
✅ 修复方式：
将 body { height: 100vh } 改为 min-height: 100vh，确保页面至少撑满视口，同时允许内容自然延展：
body {
min-height: 100vh; /* ✅ 替代 height: 100vh */
display: flex;
background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
margin: 0;
padding: 0;
}⚖️ 3. 冗余样式干扰与重置风险
通配符重置 * { margin: 0; padding: 0; } 虽常用，但会无差别清除所有元素默认间距，包括 <h1> 等标题的天然 margin。当后续仅靠 padding-left: 160px 控制横向位置时，若父容器（如 <header>）未设置 width 或 overflow 约束，可能引发布局错位或文本溢出隐藏。
✅ 优化建议：
- 移除 h1, p { padding-left: 160px } —— 此偏移应由 #welcome-section 的内边距或 text-align 配合 max-width 实现；
- 为 <header> 添加明确宽度与居中逻辑，例如：
#welcome-section {
text-align: center;
margin: 160px auto 0; /* 顶部留白，水平居中 */
max-width: 800px; /* 防止过宽失衡 */
padding: 0 20px; /* 响应式内边距 */
}✅ 最终精简版关键 CSS（推荐采用）
* { margin: 0; padding: 0; }
.nav {
position: fixed;
top: 0; left: 0; width: 100%;
background: red;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.9);
display: flex; justify-content: flex-end;
}
body {
min-height: 100vh;
background: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
#welcome-section {
margin: 160px auto 0;
text-align: center;
padding: 0 20px;
}
h1, .welcum {
color: white;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 50px;
font-weight: 150;
margin: 0; /* 清除默认 margin */
}
.welcum {
color: orangered;
font-size: 1.4rem;
font-style: italic;
margin-top: 1rem; /* 用 margin 控制间距，更语义化 */
}? 重要提醒：
- 检查浏览器开发者工具（F12）的「Computed」面板，确认目标元素的 display、visibility、opacity、color 及是否被 overflow: hidden 父容器裁剪；
- 使用 outline: 2px solid lime 临时调试元素真实位置；
- z-index 是“双刃剑”，仅在明确需要层叠控制时使用，并始终搭配 position；
- min-height: 100vh + flex 布局是现代全屏首屏设计的稳健基础。
遵循以上原则，你的 <h1>、<h2> 等标题将稳定、清晰地呈现于页面之上，不再“神秘失踪”。
