CSS 如何使用“z-index”将菜单始终置于内容之上

在本文中，我们将介绍如何使用CSS中的“z-index”属性来控制元素的层叠顺序，以便实现将菜单始终置于内容之上的效果。

阅读更多：CSS 教程

什么是“z-index”

“z-index”是CSS中的一个属性，用于控制元素的层叠顺序。每个元素都有一个默认的层叠顺序。具有较高层叠值（即较大的“z-index”值）的元素将显示在具有较低层叠值的元素之上。通过修改“z-index”属性的值，我们可以调整元素在页面中的显示顺序。

示例：始终将菜单置于内容之上

为了演示如何使用“z-index”属性将菜单置于内容之上，我们将创建一个简单的网页布局。首先，我们设计一个包含菜单和内容两个部分的页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS z-index</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>欢迎访问我们的网站</h2>
      <p>这里是网站的正文内容。</p>
    </section>
  </main>
</body>
</html>

接下来，我们需要为菜单和内容部分添加样式。在CSS文件中，将菜单的样式设置为固定定位，以确保它始终显示在页面的顶部。同时，为菜单添加一个较高的层叠值，以确保它在内容之上。

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  padding: 10px;
  z-index: 999;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}