本文针对 HTML 中（或其它标题元素）文本不可见的问题，解析因 CSS 层叠、定位冲突、z-index 误用及高度限制导致的隐藏现象，并提供精简、健壮的修复策略。

本文针对 html 中 `

`（或其它标题元素）文本不可见的问题，解析因 css 层叠、定位冲突、z-index 误用及高度限制导致的隐藏现象，并提供精简、健壮的修复策略。

在实际开发中，标题（如

、

）内容“莫名消失”并非罕见问题——它往往不是文本真的被删除，而是被 CSS 的视觉规则意外遮挡或移出视口。从你提供的代码可见：虽然

和

元素已正确写入 HTML，但其内容未正常渲染，核心症结在于以下三类典型 CSS 误用：

? 1. z-index 的滥用引发层叠遮挡

你的 .nav、body、#welcome-section 和 .welcum 均设置了 z-index，但未配合 position: relative/absolute/fixed 形成有效层叠上下文。更关键的是：.nav 使用 position: fixed 且 z-index: 300，而 #welcome-section（含

和

）虽设 z-index: 1000，却未声明 position 属性（仅 display: block），导致 z-index 完全失效。此时

实际位于默认层叠顺序（stacking context root），极易被固定导航栏覆盖或受父容器影响。

✅ 修复方式：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

移除所有非必要 z-index（尤其对静态布局元素）；
若需确保内容层在导航之上，仅给 #welcome-section 添加 position: relative 即可激活其 z-index（无需设值，浏览器默认为 auto）；
避免全局 z-index 数值竞赛，优先通过 DOM 顺序和语义化结构控制层叠。

? 2. height: 100vh 导致内容被裁切

body { height: 100vh } 强制将 body 高度锁定为视口高度，但你的

设置了 margin-top: 160px，且

又有 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; } 虽常用，但会无差别清除所有元素默认间距，包括

等标题的天然 margin。当后续仅靠 padding-left: 160px 控制横向位置时，若父容器（如

）未设置 width 或 overflow 约束，可能引发布局错位或文本溢出隐藏。

✅ 优化建议：

移除 h1, p { padding-left: 160px } —— 此偏移应由 #welcome-section 的内边距或 text-align 配合 max-width 实现；
为
添加明确宽度与居中逻辑，例如：

#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 布局是现代全屏首屏设计的稳健基础。

遵循以上原则，你的