CSS-定位

一. 相对定位 position：relative；

特点：

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

2：原来标准流的位置仍然占有，后面的盒子仍以标准流的方式对待它

3：不脱标，继续保留原来的位置，给绝对定位当爹用的

二：绝对定位 position：absolute；

特点：

1：如果祖先元素有定位（相，绝，固），则以最近一级有定位的祖先元素为参考，无则以浏览器窗口为参照；

2：不再占有原先的位置，脱标

三：固定定位 position: fixed；

特点：

1：以浏览器可视窗口为参照点，固定在可视区域

2：跟父元素没有关系，不随滚动条滚动

3：不再占有原先位置，脱标，特殊的绝对定位

四：粘性定位 position：sticky；

特点：

1：以浏览器可视窗口为参照点（固定定位特点）

2：粘性定位占有原先的位置 （相对定位特点）

3：必须添加top，bottom，left，right 其中一个才能生效

4：跟页面滚动搭配，兼容性差，IE低版本不支持

五：定位叠放次序 z-index ：

数值（不加单位）可以为正 / 负整数，0，默认是auto；数值越大，盒子就越靠上，提升定位层级！数值相同的话，后来者居上

六：定位特殊特性（和浮动类似）

1：行内元素添加绝对 / 固定定位，可直接设置宽高 （相当于变成了行内块元素）

2：块级元素添加绝对 / 固定定位，不给宽高的话默认内容大小

3：浮动，绝对，固定定位元素不会触发外边距合并问题

4：绝对 / 固定定位会压住下面标准流的所有内容，而浮动元素不同，只会压住它后面标准流盒子，不会压住文字和图片。（浮动产生最初目的是做文字环绕效果）