固定页眉是网页前端开发中非常常见的需求，核心是通过CSS的position属性和top属性配合实现，让页眉在页面滚动时始终保持在视口顶部位置，不会随着页面内容滚动而消失。
position与top的基础用法
要实现固定页眉，首先需要理解两个核心属性的作用：
- position：用于指定元素的定位方式，可选值包括static、relative、absolute、fixed、sticky，其中fixed是固定定位，会让元素脱离文档流，相对于浏览器视口进行定位。
- top：用于设置定位元素的上边缘相对于其定位参照物的上边缘的偏移量，当position为fixed时，top的参照物就是浏览器视口的上边缘。
固定页眉的完整实现步骤
1. 基础HTML结构搭建
首先我们需要准备基础的页面结构，包含固定页眉和下方的内容区域，具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定页眉示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 固定页眉区域 -->
<header class="fixed-header">
<div class="header-content">
<span class="logo">我的网站</span>
<nav class="nav-list">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>产品服务</li>
<li>联系我们</li>
</ul>
</nav>
</div>
</header>
<!-- 页面内容区域 -->
<main class="page-content">
<p>这里是页面的主要内容，会有很多文字用来测试滚动效果。</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容