页面布局中元素定位的几种方式

元素定位（position）

定位是一种更为高级的布局方法。通过定位可以使得元素摆放在页面中任意位置。
position属性有五个值：

• static ------ 默认值
• relative---- 相对定位
• absolute --绝对定位
• fixed -------固定定位
• sticky ------粘滞定位

偏移量（offset），有四个属性：top、bottom、left、right。
top值越大，定位元素向下移动的越多；bottom越大，定位元素向上移动的越多。left = - bottom
left值越大，定位元素向右移动的越多；right越大，定位元素向左移动的越多。left = - right

1、相对定位

当元素的position属性值设置为relative时开启相对定位。
特点：

1. 不设置偏移量（offset）时，元素不会发生变化。
2. 相对定位是相对于元素原本的位置进行定位。
3. 相对定位会提升元素的层级。
4. 相对定位不会使元素脱离文档流，不会改变元素性质（行内元素、块元素）。

相对定位

粘滞定位
当元素的position属性值设置为sticky时开启粘滞定位。粘滞定位是一种相对定位，不同的是可以使元素在某个位置固定不动。

2、绝对定位

当元素的position属性值设置为absolute时开启绝对定位。
特点：

1. 开启绝对定位时，如果不设置偏移量，元素的位置不会改变。
2. 元素会从文档流中脱离。
3. 会改变元素性质—行内元素变为块，块的内容会被内容撑开。
4. 绝对定位会使元素提升一个层级。
5. 绝对定位元素是相对于其包含块进行定位。
   包含块：
   - 正常情况下，包含块是离当前元素最近的祖先块元素。
   - 绝对定位情况下，离它最近的开启定位的祖先块元素（html为根元素、初始包含块）。

固定定位
当元素的position属性值设置为fixed时开启固定定位。固定定位是一种绝对定位，不同的是永远参照浏览器视口进行定位。固定定位的元素不会随滚动条移动。

总结

一般工作当中，使用较多的是相对定位和绝对定位，另外两种兼容性有局限。