面试官：介绍一下CSS定位？absolute和relative分别依据什么定位？

能说服一个人的，从来不是道理，而是南墙。

一、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