导航栏无法显示在页面顶部，调整z-index无效的问题求助

问题根源排查 #

1. HTML结构错误：导航容器<nav class="nav">被提前闭合，导致菜单列表<ul class="navbar">完全脱离导航栏的定位控制，这是布局混乱的核心原因。
2. CSS拼写错误：开头的htnl是笔误，应为html，导致全局margin/padding重置规则失效。
3. 样式逻辑问题：
   • .nav未设置高度，且未重置<ul>的默认样式（margin、padding、列表标记），导致导航栏布局异常。
   • body设置display: flex后，改变了子元素的默认排列流，干扰固定定位的表现。
   • #welcome-section的z-index设为1000，远高于导航栏的300，即使结构正确也会被内容遮挡。

修正后的代码 #

CSS代码

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.nav {
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 明确导航栏高度 */
  background: red;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  align-items: center; /* 垂直居中菜单 */
  padding-right: 20px; /* 菜单右侧预留间距 */
}

/* 重置列表默认样式 */
.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem; /* 菜单项间距 */
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

h1,
p {
  color: white;
  padding: 0;
  margin: 0;
}

body {
  position: relative;
  width: auto;
  min-height: 100vh; /* 改用min-height适配内容高度 */
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
  margin: 0;
  padding: 0;
  padding-top: 60px; /* 给固定导航栏预留顶部空间 */
}

#welcome-section {
  text-align: center;
  padding-top: 160px; /* 用内边距替代margin-top，避免布局偏移 */
}

h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 50px;
  font-weight: 150;
}

.welcum {
  font-size: 1.4rem;
  font-style: italic;
  color: orangered;
  font-family: 'Poppins', sans-serif;
}

HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 补全viewport属性 -->
</head>
<body>
  <!-- 导航栏移至页面最顶部，确保优先渲染 -->
  <nav class="nav">
    <ul class="navbar">
      <li>
        <a href="#welcome-section">About</a>
      </li>
      <li>
        <a href="#projects">Work</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

  <section id="welcome-section">
    <header>
      <h1 class="title">Hey I am Matija</h1>
      <p class="welcum">a web developer</p>
    </header>
  </section>

  <div class="background"></div>
  <section class="project">
    <div class="projects"></div>
  </section>
  <section class="recruit">
    <div class="contact"></div>
  </section>
</body>
</html>

关键修复说明 #

• 修正<nav>结构，将菜单列表放入导航容器内，确保固定定位生效。
• 给.nav设置固定高度并垂直居中菜单，同时重置<ul>默认样式消除浏览器默认布局干扰。
• 调整z-index层级，确保导航栏显示在最上层。
• 给body添加顶部内边距，避免页面内容被固定导航栏遮挡。
• 补全viewport元标签，优化移动端适配效果。

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