position的属性值及其区别

1. 固定定位（fixed）

1.1概念

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变。

1.2特点

（1）以浏览器可视窗口为参照点移动

• 跟父元素没有任何关系

• 不随着滚动条滚动

（2）固定定位不占有原先的位置

---

2.相对定位（relative）

2.1概念

相对定位是元素在移动位置的时候，是相对于原来的位置来说的。

2.2特点

• 移动位置的时候参照点是原来自己的位置

• 不脱标，原来位置继续保留

---

3.绝对定位（absolute）

3.1概念

绝对定位是元素在移动位置的时候，相对于其它祖先元素来说的。

3.2特点

• 如果没有祖先元素 或 祖先元素没有定位，以浏览器为准定位

• 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置

• 绝对定位不再占有原先的位置

---

4.静态定位（static）

4.1概念

静态定位是元素的默认定位，相当于无定位的意思。

4.2特点

• 静态定位按照标准流特性摆放位置，无边偏移

• 静态定位在布局时很少用到

---

5.粘性定位（sticky）

5.1概念

可以被认为是相对定位和固定定位的混合。

5.2特点

• 以浏览器可视窗口为难参照点移动元素

• 粘性定位占有原先的位置

• 必须添加top、right、left、bottom其中一个才有效