CSS 的元素有 5 种定位方式，分别是：
- static
- relative
- absolute
- fixed
- sticky
其中，使用 static, relative 和 sticky 定位的元素，存在于正常的布局中；而使用 absolute 或 fixed 定位的元素，则会脱离正常布局，它们不再占据实际的空间，也不会对其他元素的位置产生影响。所以，absolute 和 fixed 这两个定位，又叫做绝对定位。如果把页面看作一块平地，页面上的元素是这片平地上的物体，那么脱离正常布局的元素就相当于被抬起来，脱离了地面。
absolute
使用 absolute 定位的元素，脱离了正常的布局，它原来的位置会被后续的非绝对定位元素替代，可以使用 top，right，bottom，left 等属性来控制它的具体位置。此时它会根据最近的、非 static 定位的祖先元素来计算具体的位置。比如，top: 10px，表示：将该元素置于距离其最近非 static 定位的祖先元素的顶部的 10px 处。
position: absolute; right: 10px
fixed
使用 fixed 定位的元素，和使用了 absolute 布局的元素类似：
- 脱离了正常的布局
- 原来的位置会被后续的非绝对定位元素替代
- 可以使用 top, right, bottom, left 等属性进行定位
和 absolute 布局不同的是：
- fixed 元素的位置，是相对于视图进行计算的。
比如，top: 10px，表示：将该元素置于距离视图顶部 10px 处。
例外
正常情况下，fixed 元素的位置，是相对于视图进行计算的。比如，top: 10px，表示：将该元素置于距离视图顶部 10px 处。但是，如果其祖先元素存在例如 transform 属性的话，那么 fixed 元素的位置，就会相对于那个使用了 transform 属性的元素。
