能说服一个人的，从来不是道理，而是南墙。
一、position属性介绍
| 取值 | 名称 | 效果 |
| static | 静态定位(默认值) | 元素按照标准流布局 (不脱标) , top、bottom、left 、right等属性不起作用 |
| relative | 相对定位 | 元素按照标准流布局 (不脱标) ，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置 |
| absolute | 绝对定位 | 元素脱离标准流 （脱标） ，可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素， 如果找不到这样的父级元素，参照对象是视口。 定位元素（positioned element），position值不为static的元素， 也就是position值为relative、absolute、fixed的元素 |
| fixed | 固定定位 | 元素脱离标准流 （脱标） ，可以通过top、bottom、left 、right进行定位，定位参照对象是视口（viewport）， 当画布（canvas）滚动时，固定不动 |
| sticky | 粘性定位 | 可以看做相对和固定定位的结合体;它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定定位; sticky是相对于最近的滚动祖先包含视口 |
1. 标准流（Normal Flow）
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流）进行排布的。
- 排布顺序：在浏览器中从左到右，从上到下顺序摆放；
- 默认情况下，元素互相之间不存在层叠现象；
2. position: sticky;
又称为粘性定位，是css3新增的。
粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定位偏移之前为相对定位，之后为固定定位。
示例：
.div{ position: sticky; top: 50px; }
设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于50px之前，div为相对定位。之后元素将固定在与顶部距离50px的位置，直到viewport视口回滚到50px以内。
特点：
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了 top:50px; ，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
二、定位元素特点
- 1.可以设置宽高(不管是块级元素还是行内元素)
- 2.宽高默认由内容撑开
- 4.不再给父元素汇报宽高数据
- 5.脱标元素内部默认还是按照标准流布局
三、定位相关属性——z-index
z-index 属性 z : z轴; index : 指数;
x 轴代表水平方向，y 轴代表垂直方向，z 轴则代表我们的目光向页面（屏幕）看进去
z-index根据指数,设置元素在z轴上的层叠顺序（仅对定位元素有效）
取值可以是正整数、负整数、0;值越大，元素就离我们“越近”，值越小，元素自然也就离我们“越远”;
默认值为auto;
比较规则
兄弟关系
z-index越大，层叠在越上面
z-index相等，写在后面的那个元素层叠在上面
非兄弟关系
各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
四、常见使用技巧
1.子绝父相
在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
子元素设置position: absolute
简称为“子绝父相”
2.绝对定位元素居中显示
绝对定位元素（absolutely positioned element）
——position取值为absolute或者fixed的元素
对于绝对定位元素来说,
定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin:0
如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin: auto另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
五、各定位属性区别
| 脱离标准流 | 定位元素 | 绝对定位元素 | 定位参照对象 | |
| static 静态定位 | × | × | × | × |
| relative 相对定位 | × | √ | × | 元素自身在标准流中的位置 |
| absolute 绝对定位 | √ | √ | √ | 最邻近的定位祖先元素（如果找不到这样的祖先元素，参照对象是视口） |
| fixed 固定定位 | √ | √ | √ | 视口 |
六、定位使用场景
定位带来的元素层叠性，经常用于一些特殊样式中。
（1）遮罩层 mask / cover
（2）网页挂件 pendant / widget （部分信息屏蔽处理）
（3）stick粘性头部导航
七、应答面试官
面试官：说一下定位？absolute和relative分别依据什么定位？
你：
1.relative依据自身定位
2.absolute依据最近一层的定位元素定位
定位元素——position属性值为absolute、relative、fixed的元素
如果没有父级元素都不是定位元素，则依据body
