基础 CSS 顶栏堆叠

在Web开发中，常常需要实现一个顶部导航栏。在一些设计中，这个导航栏可能需要在滚动时固定在页面的顶部。为了实现这一效果，我们需要用到CSS的position属性。本文将介绍如何使用CSS实现一个简单的顶部导航栏并使其固定在页面顶部。

HTML代码

首先，我们需要编写HTML代码来创建页面布局。在本例中，我们将使用一个简单的带有链接的导航菜单作为顶部导航栏，如下所示：

<header>
  <nav>
    <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

CSS样式

在创建HTML代码后，我们需要使用CSS样式来实现顶部导航栏。我们使用position:fixed属性使导航栏固定在页面顶部，z-index属性使得导航栏位于其他内容之上，以便它不会被其他内容遮挡。此外，我们使用一些CSS样式来使导航栏看起来更漂亮。

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

nav {
  display: flex;
  justify-content: center;
  padding: 10px;
}

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

li {
  margin: 0 10px;
}

a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

效果演示

最后，我们来看一下实现的效果。运行HTML代码并将CSS样式应用于页面，我们可以得到以下效果：

如上图所示，我们成功地创建了一个简单的顶部导航栏并使其固定在页面的顶部。

以上就是关于如何使用CSS实现一个简单的顶部导航栏并使其固定在页面顶部的介绍，希望对你有所帮助！