position 定位模型

CSS 的 position 属性决定元素的定位方式，配合 top、right、bottom、left 属性可精确控制元素位置。

1. 静态定位（static）

• 默认值，元素按正常文档流排列。
• top、left 等属性无效。

position: static;

2. 相对定位（relative）

• 元素保持在文档流中，但可相对自身正常位置偏移。
• 偏移不会影响其他元素布局。

position: relative;
top: 10px;
left: 20px;

3. 绝对定位（absolute）

• 元素脱离文档流，定位相对于最近的已定位父元素（非 static）。
• 可使用 top、left 等属性精确定位。
• 不占据空间，可能覆盖其他内容。

position: absolute;
top: 0;
right: 0;

4. 固定定位（fixed）

• 元素脱离文档流，定位相对于浏览器窗口固定位置。
• 滚动页面时元素位置不变。

position: fixed;
bottom: 10px;
right: 10px;

5. 粘性定位（sticky）

• 介于相对定位和固定定位之间。
• 元素在滚动到设定阈值时固定位置。

position: sticky;
top: 0;

position 定位示例

loading