使用 fixed 实现常驻导航栏，sticky 实现吸顶效果，relative 与 absolute 搭配控制下拉菜单位置，结合 z-index 管理层级，确保导航布局稳定、交互流畅。
导航栏是网页中最常见的组件之一，CSS定位在实现其布局和交互效果中起着关键作用。合理使用
position属性，可以让导航栏固定在视口、层级清晰、响应式良好。下面结合实际场景，讲解CSS定位在导航栏中的典型应用。
1. 使用 fixed 定位实现顶部常驻导航栏
当用户滚动页面时，希望导航栏始终显示在顶部，这时应使用
position: fixed。
特点：脱离文档流，相对于浏览器视口定位，不会随页面滚动而消失。
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 1000; /* 确保在其他内容之上 */
}
.content {
margin-top: 60px; /* 避免内容被导航栏遮挡 */
}
说明：fixed 定位后必须设置
top: 0才能贴顶，同时用
z-index提升层级防止被盖住。主体内容需预留空间，避免被遮挡。
立即学习“前端免费学习笔记（深入）”；
2. relative 与 absolute 搭配实现下拉菜单
下拉菜单通常由主菜单项触发，使用
relative + absolute可精确控制子菜单位置。
.menu-item {
position: relative;
}
.dropdown {
position: absolute;
top: 100%; /* 紧贴父元素下方 */
left: 0;
width: 200px;
background: #fff;
border: 1px solid #ccc;
display: none; /* 默认隐藏 */
}
.menu-item:hover .dropdown {
display: block; /* 鼠标悬停时显示 */
}
说明：父级设为
relative，使子级
absolute定位以其为参考。通过
top: 100%让下拉框从父元素底部开始显示，避免重叠。
3. 使用 sticky 实现智能吸附导航
position: sticky是 fixed 和 relative 的结合体，适合在特定区域内“吸顶”。
.sticky-nav {
position: sticky;
top: 0;
background: white;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
说明：元素在滚动到
top: 0之前表现为 relative，到达视口顶部后变为 fixed 效果。无需 JavaScript 即可实现平滑吸顶，兼容性较好（现代浏览器均支持）。
4. 注意层级与遮挡问题
多个定位元素叠加时，容易出现遮挡。利用
z-index控制堆叠顺序至关重要。
- 导航栏一般设为较高
z-index
（如 1000），确保覆盖轮播图、弹窗等元素 - 下拉菜单也需设置
z-index
，避免被页面其他块级元素遮挡 - 注意不要滥用高数值，建议按层级划分（如 100、200、1000）
基本上就这些。掌握 fixed、sticky、relative 和 absolute 的组合使用，就能应对大多数导航布局需求，关键是理解定位上下文和层叠关系。不复杂但容易忽略细节。
