这是我参与「第四届青训营 」笔记创作活动的的第4天。
1.定位的定义
定位允许我们定义的元素出现在页面的任何位置，是通过position属性配合left，right…等来实现的。
2.常见的几种定位及其特性
（1）静态定位：
用法：position:static
特点：
a.静态定位的盒子是标准流状态，用于取消定位。
b.静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。
（2）相对定位
用法：position:relative
特点：
a.相对定位的盒子是相对于自己原来的位置来移动的（参照点是自己原来的位置）。
b.相对定位的盒子在原来标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）。
（3）绝对定位
用法：position: absolute
特点：
a.绝对定位的盒子如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位（Document文档）。
b. 绝对定位的盒子如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的定位祖先元素为参考点移动位置。
c.绝对定位的盒子不再占有原先的位置（脱标）。
（4）固定定位
用法：position: fixed
特点：
a.固定定位的盒子以浏览器的可视窗口为参照点移动元素。
b.固定定位的盒子跟父元素没有任何关系。
c.固定定位的盒子不随滚动条滚动。
d.固定定位的盒子不再占有原先的位置（脱标）。
（5）粘性定位
用法：position: sticky
特点：
a.粘性定位的盒子以浏览器的可视窗口为参照点移动元素（固定定位的特点）。
b.粘性定位的盒子占有原先的位置（相对定位的特点）。
c.粘性定位的盒子必须添加top、left、right、bottom其中一个才有效。
3.定位的叠放次序
盒子叠放可以使用z-index来控制盒子的前后次序，但是，需注意以下三点：
（1）数值可以是正整数、负数或者0，默认是auto，数值越大，盒子越靠上
（2）数字后面不能加单位
（3）只有定位的盒子才有这个属性
4.定位的特殊性质
（1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
（2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
（3）脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位元素都不会触发外边距合并的问题。
