css 定位介绍

相对定位 position: relative;

1. 不会脱离文本流

2. 相对自身进行，且偏移后不影响任何元素

3. margin偏移超出范围则不会超过父级容器，而使用相对定位后 left right等调整可超出父级盒子

4. left与right冲突 优先left top与bottom冲突优先top

绝对定位 position:absolute

1. 宽高为auto 自适应文本

2. 根据包含块 父级的一个定位元素(相对定位、绝对定位、固定定位)

3. 如果设置了absolute 但又不进行设置任何的便宜则默认原始位置

4. 没有找到定位元素以body定位

5. 一般设置定位元素位relative 原因：1不用改变原来位置 2.不用改变排列属性

6. z-index 决定层级 越大层级越高

固定定位

1. 相对于可视窗口

2. 当一个元素的position被设置为fixed，而top、bottom、left、right未指定时：

   水平方向，元素会靠在父元素的内左边缘；

   垂直方向，元素离浏览器窗口上边缘的距离，为页面打开时该元素离浏览器窗口上边缘的距离。

固定定位与固定定位

共同点

1. 固定定位与决定定位肯定是块级

2. 定义不是浮动（会将float强制改为float:none）,且没有外边距合并（例如margin如果超出父容器则会裁剪掉，而定位不会）

不同点

固定定位基于页面视口，绝对定位基于第一屏的位置

定位宽度

1. 绝对定位与固定定位设置后宽度为本身宽度

2. 相对定位充满整个块级