css 之 position 总结（含css3 新增 sticky）

position 是css 常用属性之一，它是css规定的元素定位属性，相对定位和固定定位会指定当前元素为块级元素。它有八个属性值： static、relative、absolute、fixed、inherit、sticky、initial，unset，其中 static、relative、absolute、fixed是css2的属性，也是最常用的，sticky、initial，unset是css3新增的，大家可以重点关注一下sticky，虽然它兼容性不好，但是却很意思。

属性值	描述
static	是定位元素的默认值，正常存在于文档流中，top、left、right、bottom 、z-index 不生效。
relative	相对定位，top、left、right、bottom、z-index 生效，它不脱离文档流，会占用当前的位置，当top等设置时，会相对于文档流偏移，而左右上下相邻元素不影响。
absolute	绝对定位，top、left、right、bottom、z-index 生效，脱 离文档流，不占用文档流空间，并且它会向上找最近的祖父position，作为它绝对定位基点，但是static这个属性absolute 不生效，如果向上查找未出现position属性，那么 absolute会将body作为基点。
fixed	绝对定位元素，它脱离文档流，top、left、right、bottom 、z-index 生效，是相对于浏览器定位的，也就是说在它之上，absolute、relative等是不生效的。
inherit	此属性是继承祖父级定位，祖父标签为absolute，它就会为absolute，祖父标签为relative，它就会为 relative，祖父为fixed、static等亦如此。
sticky	这个属性尴尬的一批，基本浏览能兼容的寥寥无几，ie,operaMINI 全军覆没，firefox 26以上，chrome 6.1以上…但是，我们也需要知道它。它是粘贴定位，用于一些特殊场景如：固定头部元素，向上滚动超出距离不消失。指定top、left、right、bottom 其中一个阙值生值，粘贴定位才会生效，否则，它的行为等同一个相对定位。它的解释是，监听页面的srcoll 事件，当元素超过视图区块顶部、左边、右边、下边距离后，添加 fixed，反之，则去掉。注意：1.优先级：top>left>right>bottom。 2. 祖父元素必须设置 overflow: visible。
initial	将属性设置回默认值，可用于所有css属性，这个很少有人用，兼容性很差，只有safire 支持
unset	是inital 和inherit的结合，设置在 top、left、right、bottom 上，意思是当属性值为可继承元素，那它等同于 inherit，非可继承元素，则等同于 inital。

小结：其实大家都觉得有些属性平时不用，那就不用看了，不是这样的，只有真正了解了它的本质，知道了它的所有属性值，适用于哪些场景，才能游刃有余的做出适用性强的布局。