上一篇
HTML区块定位之谜，究竟是如何实现精准定位的？
HTML区块的定位主要依赖于CSS（层叠样式表）中的定位属性，以下是一些常用的定位方法及其详细说明：
相对定位（Relative Positioning）
相对定位将元素放置在正常位置,然后通过top、right、bottom和left属性进行偏移，元素相对于其正常位置进行定位，但仍然保留其原始位置，因此其他元素可以围绕它。
| 属性 | 说明 |
|---|---|
| top | 元素顶部与定位上下文顶部之间的偏移量 |
| right | 元素右部与定位上下文右部之间的偏移量 |
| bottom | 元素底部与定位上下文底部之间的偏移量 |
| left | 元素左部与定位上下文左部之间的偏移量 |
绝对定位（Absolute Positioning）
绝对定位将元素从文档流中移除,并相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。
| 属性 | 说明 |
|---|---|
| position: absolute; | 设置元素为绝对定位 |
| top | 元素顶部与定位上下文顶部之间的偏移量 |
| right | 元素右部与定位上下文右部之间的偏移量 |
| bottom | 元素底部与定位上下文底部之间的偏移量 |
| left | 元素左部与定位上下文左部之间的偏移量 |
固定定位（Fixed Positioning）
固定定位与绝对定位类似,但元素相对于浏览器窗口进行定位，而不是相对于其最近的已定位祖先元素。
| 属性 | 说明 |
|---|---|
| position: fixed; | 设置元素为固定定位 |
| top | 元素顶部与视口顶部之间的偏移量 |
| right | 元素右部与视口右部之间的偏移量 |
| bottom | 元素底部与视口底部之间的偏移量 |
| left | 元素左部与视口左部之间的偏移量 |
粘性定位（Sticky Positioning）
粘性定位是相对定位和固定定位的混合体,元素在页面滚动时，当达到指定的偏移量时，会变为固定定位。
| 属性 | 说明 |
|---|---|
| position: sticky; | 设置元素为粘性定位 |
| top | 元素顶部与定位上下文顶部之间的偏移量 |
| right | 元素右部与定位上下文右部之间的偏移量 |
| bottom | 元素底部与定位上下文底部之间的偏移量 |
| left | 元素左部与定位上下文左部之间的偏移量 |
FAQs
Q1：相对定位和绝对定位有什么区别？
A1： 相对定位将元素相对于其正常位置进行定位，而绝对定位将元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。
Q2：固定定位和绝对定位有什么区别？
A2： 固定定位和绝对定位都使元素脱离文档流，但固定定位相对于浏览器窗口进行定位，而绝对定位相对于其最近的已定位祖先元素进行定位。
