1. 固定定位的基本概念
1.1 定位模型与视口的关系
固定定位（position: fixed）使元素脱离普通文档流，并以浏览器的可视区域（视口）为定位参照点。无论页面如何滚动，元素都维持在相对不动的位置，这点在打造悬浮工具条或固定导航时尤为常用。
与普通文档流中的元素不同，固定定位的元素不再参与文档的垂直布局，其他元素的布局会忽略它的位置。此时通过top、right、bottom、left来精确定位到视口边缘。
在实际页面设计中，固定定位通常结合z-index来确保覆盖关系清晰，避免被滚动区域遮挡。固定定位的使用场景包括头部导航、悬浮按钮、工具条等。
/* 固定定位示例：顶部固定栏 */
.app-header {position: fixed;top: 0;left: 0;right: 0;height: 60px;background: #333;color: #fff;z-index: 1000;
}
通过以上代码，导航栏始终停留在视口顶部，即使页面滚动也不跟随。记得为主体内容留出与固定元素等高的区域，防止被覆盖。
2. position 属性的取值及含义
2.1 常用取值与行为对比
除了 fixed，position 属性还包括 static、relative、absolute、sticky，它们在定位逻辑和文档流中的作用各有不同。
static 是默认值，元素按正常文档流排列，无法通过 top/left/right/bottom 进行偏移。
relative 会保留原本在文档中的位置，但元素本身可以通过偏移属性进行移动，仍影响后续的布局。
absolute 相对于最近的定位祖先（非 static 的祖先）进行定位，若没有定位祖先，则相对于初始包含块定位，脱离文档流，常用于弹出层、卡片定位等场景。
/* relative 与 absolute 示例 */
.container { position: relative; height: 200px; border: 1px solid #ccc; }
.box { position: absolute; top: 20px; left: 30px; width: 120px; height: 60px; background: #f5f5f5; }
另外，sticky 是结合滚动触发的定位方式，元素在达到指定偏移量前表现为 normal flow，达到偏移量后黏附在相应位置，常用于标题栏的粘性效果。
/* sticky 示例：粘性标题栏 */
.section-title {position: sticky;top: 0;background: white;z-index: 500;
}
理解这几种取值的差异，有助于快速判断何时使用固定定位、何时使用相对定位、以及如何在嵌套结构中正确定位。
3. 实战场景：固定定位在网页布局中的应用
3.1 顶部导航条的固定实现
在实际页面中，将顶部导航设为固定定位可以提升可用性，但需要注意遮挡与内容间的关系。通过将导航的高度设为固定值，留出等高的滚动后留白区域，避免正文被覆盖。
实现要点包括设置 position: fixed、顶端位移、宽度覆盖整个视口，以及合适的 z-index，确保导航位于最上层。
/* 顶部导航固定样式 */
.top-nav {position: fixed;top: 0;left: 0;right: 0;height: 60px;background: #333;color: #fff;display: flex;align-items: center;padding: 0 20px;z-index: 1000;
}
.main-content {padding-top: 60px; /* 与固定导航等高，确保内容不被遮挡 */
}
通过上述实现，导航栏在滚动时保持可见，同时为后续内容提供了足够的显示空间。 padding-top 的设置是避免遮挡的关键手段之一。
3.2 固定定位结合侧边工具栏的布局设计
除了顶部固定，侧边固定工具栏也比较常见，用于快速操作或快捷入口。将工具栏固定在视口一侧，能够在不同滚动位置保持可访问性。
设计时需要关注两点：一是固定元素的尺寸与可视区域的比例，二是与主内容的交错关系。通过合适的 width、height 与 margin，实现流畅的用户体验。
/* 侧边固定工具栏样式 */
.side-toolbar {position: fixed;right: 20px;top: 180px;width: 48px;display: flex;flex-direction: column;gap: 10px;z-index: 900;
}
.side-toolbar button {width: 48px;height: 40px;border-radius: 6px;border: none;background: #007bff;color: #fff;
}
在实现时要确保滚动时工具栏不会遮挡关键内容，必要时通过 媒体查询 或交互设计调整在不同设备上的可访问性。
