position的四个属性值： relative ，absolute ，fixed，static

下面通过简单的 HTML 结构来详细讲解 CSS 的四个 position 属性：

HTML 基础结构

<div id="parent">
  <div id="sub1">sub1</div>
  <div id="sub2">sub2</div>
</div>

1. relative - 相对定位

基本概念

• 相对对象：元素本身在正常文档流中的位置
• 偏移基准：基于元素原有的 margin 左上角进行偏移

代码示例

#sub1 {
  position: relative;
  padding: 5px;
  top: 5px;
  left: 5px;
}

行为特点

对自身的影响：

• 如果不设置 relative，sub1 会处于正常的文档流位置
• 设置后，元素会根据 top、right、bottom、left 的值从原本应有的位置进行偏移
• “相对"的含义正体现在这里——相对于自身原有位置

对其他元素的影响：

• sub2 的位置不会受到 sub1 设置 relative 的影响
• 如果 sub2 也设置 relative，同样会基于自身原有位置进行偏移

💡 重要提示：relative 的偏移是基于元素的 margin 左上角

2. absolute - 绝对定位

定位机制解析

很多人误以为 absolute 总是相对于浏览器窗口定位，这是不准确的。实际上，这是 fixed 属性的特性。

两种定位情况

情况一：有定位的父元素

条件： sub1 的父元素 parent 设置了 position 属性，且值为 absolute 或 relative（非默认值）

#parent {
  position: relative; /* 或 absolute */
}

#sub1 {
  position: absolute;
  top: 0;
  left: 0;
}

定位细节：

• sub1 会以 parent 为参照进行定位
• 定位基准点会忽略 parent 的 padding，从 padding 的左上角开始定位
• ⚠️ 这与我们通常认为的 “从 margin 左上角开始” 不同

对其他元素的影响：

• sub1 会脱离正常文档流，形成"层"效果
• sub2 会占据 sub1 原有的位置，文档流从 parent 重新开始

情况二：无定位的父元素

条件： sub1 的所有父元素都没有设置 position 属性（或都是 static）

• sub1 会以 body 为定位对象
• 按照浏览器窗口进行定位

3. fixed - 固定定位

特性说明

• fixed 是特殊的 absolute
• 总是以 body 为定位对象
• 按照浏览器窗口进行定位，不随页面滚动而移动

适用场景

• 固定导航栏
• 悬浮按钮
• 侧边工具栏

4. static - 静态定位

默认行为

• position 的默认值
• 元素按照正常的文档流进行排列
• 忽略 top、right、bottom、left 和 z-index 属性

总结对比

🔍 重点理解：absolute 定位是最需要仔细理解的，建议通过实际代码练习来加深理解。掌握好定位参照物的选择是使用 absolute 的关键。