什么是 position？
position 是 CSS 中用于控制元素定位方式的重要属性。它决定了元素如何在文档流中放置，以及是否受其他元素影响。
共有五种常用取值：static（默认）、relative、absolute、fixed 和 sticky。
五种定位方式详解
1. static（静态定位）
这是所有元素的默认定位方式。元素按照正常的文档流排列，top、right、bottom、left 和 z-index 属性无效。
static
div { position: static; }2. relative（相对定位）
元素仍处于正常文档流中，但可以通过 top、left 等属性相对于其原始位置进行偏移。不会影响其他元素的位置。
relative
div { position: relative; top: 20px; left: 20px; }3. absolute（绝对定位）
元素脱离文档流，相对于最近的已定位（非 static）祖先元素进行定位。若无，则相对于初始包含块（通常是 <body>）。
absolute
div { position: absolute; top: 30px; right: 30px; }4. fixed（固定定位）
元素脱离文档流，相对于视口（viewport）定位，即使页面滚动也不会移动。常用于导航栏、悬浮按钮等。
（页面右下角有一个 fixed 元素，请滚动查看效果）
div { position: fixed; bottom: 20px; left: 20px; }5. sticky（粘性定位）
结合了 relative 和 fixed 的特点。元素在滚动到特定阈值前表现为 relative，之后变为 fixed。
滚动此区域查看 sticky 效果 ↓
sticky
div { position: sticky; top: 10px; }使用建议
- 优先使用
relative进行微调布局，避免破坏文档流。 absolute适合弹窗、下拉菜单等需要脱离流的组件。fixed适用于全局固定元素，注意移动端兼容性。sticky非常适合表头、侧边目录等“吸顶”场景。- 避免过度嵌套定位元素，以免造成维护困难。