【32】CSS核心样式（9）——定位属性（上）

我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。

---

本篇•定位属性介绍• 相对定位 • 绝对定位 • 固定定位
下篇 • 定位应用 • 压盖顺序

---

一、定位属性介绍

定位属性	具体含义
属性名	position
属性值	relative 相对定位
	absolute 绝对定位
	fixed 固定定位
作用	设置定位的元素，它需要根据某个参考元素发生位置的偏移

偏移量属性	定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置
	水平方向：left、right
	垂直方向：top、bottom
属性值	常用 px 为单位的数值，或者百分比

---

二、相对定位

1.含义

• 属性值：relative，相对的意思。
• 参考元素：标签加载的原始位置。
• 必须搭配偏移量属性才能发生位置移动。

position: relative; 
left: 100px;
top: 100px;

2.性质

• 性质：相对定位的元素不脱离标签的原始状态（标准流、浮动）*，不会让出原来占有的位置。 元素显示效果上，原位留坑，形影分离。

3. 注意事项

注意①：偏移量属性的值是区分正负的

• 正数：表示偏移方向与属性名方向相反。
• 负数：表示偏移方向与属性名方向相同。

position: relative;
left