使用 position: fixed 可实现头部导航固定在页面顶部，通过设置 header 的 top: 0 和 width: 100% 使其始终显示在视窗上方，结合 z-index 确保层级最高；为防止遮挡内容，需给 main 元素添加 margin-top 留出导航高度，形成完整布局。
在CSS初级项目中，制作一个固定头部导航是常见需求。通过 position 属性与页面布局（layout）的结合，可以轻松实现头部始终停留在页面顶部的效果，即使页面滚动也不会消失。
将导航栏设置为固定定位，使其脱离文档流并固定在视窗的某个位置，通常用于顶部导航。
关键代码：position: fixed; 让元素相对于浏览器窗口固定位置。配合 top: 0; 可使导航栏始终贴在页面最上方。
示例代码：
立即学习“前端免费学习笔记（深入）”；
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 20px;
z-index: 1000; /* 确保在其他内容之上 */
}
由于 fixed 元素脱离文档流，后面的页面内容会“上移”，可能被导航栏遮挡。需要给主体内容添加足够的上边距。
示例代码：
立即学习“前端免费学习笔记（深入）”；
main {
margin-top: 60px; /* 假设导航栏高60px */
padding: 20px;
}
合理的HTML结构有助于样式控制。推荐如下基本布局：
<header>固定导航</header> <main>页面内容</main>
基本上就这些。用 position: fixed 结合简单的布局调整，就能实现稳定可靠的固定头部效果，适合大多数静态网站或初级项目使用。
以上就是CSS初级项目中如何制作固定头部导航_layout与position结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
759
收藏
