position属性值(面试必考)

相对定位(relative)、绝对定位(absolute)和z-index属性
position属性同样可以实现和float属性一样的效果，其主要被运行于网页布局上。

它主要提供static, relative, absolute和fixed四个值。

static

为默认值，指示元素出现在正常的文档流中；

相对定位(relative)：

相对于该元素在文档流中的正常位置进行偏移定位，原占位仍保留(即不脱离文档流)。

绝对定位(absolute)：

相对于static定位以外的最邻近父级元素进行偏移定位，即相对于其直接父级元素。注意：脱离了文档流

绝对定位较少直接单独使用在正常的文档流中，而是配合相对定位来进行一些更灵活更精确的定位。换言之，就是绝对定位主要运行于进行了相对定位的元素框架层里面，然后依据该层的最左上点作为基点进行偏移定位。

固定定位(fixed)：

相对于浏览器窗口进行定位，即固定定位是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动，因此应用得很少。主要运行于浏览器窗口的贴边定位。绝对定位(absolute)同样可以应用在固定定位的框架层里面。

对于这三种定位，被定位的元素的位置都是通过 “left”, “top”, “right” 以及 “bottom” 这四个属性进行指定的。

需要将被这三种方式定位的对象还原到正常的文档流中，可使用static属性对其再次定位。

z-index属性：使用了以上三种定位后，都会使正常的文档流一定程度上发生改变，造成元素显示出现重叠的情形，特别是使用绝对定位时。为了能让重叠的元素有序的显示出来，我们需要在定位时对相关元素加上z-index属性，其值是一个整数值（默认值为0），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。

新增属性sticky:

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

什么是结合两种定位功能于一体呢？

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

注意position:sticky 的生效是有一定的限制的：

(1)这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同
(2)并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
(3)达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。
(4)设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：

• 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以position:sticky 元素也不会有滚动然后固定的情况。
• 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute |
  fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

position:sticky的使用场景

运用 position:sticky 实现头部导航栏固定

1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里。
2、z－index 无效。
3、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。这个比较抽象，demo点击预览 在这里，看完之后就懂了。强调这一点是因为在实际使用中，碰到 body 设置 height：100% 的时候 sticky 元素停在某一个位置不动了。

其实还可以有这 3 个取值：

{
    /* 全局值 */
    position: inherit;
    position: initial;
    position: unset;
}

inherit:规定应该从父元素继承 position 属性的值。

参考：http://web.jobbole.com/90352/