浅谈position

说到京东淘宝的官网，行外人看商品，行内人看布局以及各种特效，比如你我，嘿嘿，言归正断，各位同行们有没有发现，很多官网中都设有固定位置不变的模块，比如旁边的返回顶部，在那个页面中无论你向下刷新再多，回到顶部的框框依然陪你到最后，这里就用到了定位。

position常见的三种定位分别是relative,absolute,fixed,这三者撑起了定位的江山，简称“三足鼎立”，那么让小姐姐我为初学的你一一介绍下吧。

首先说说relative，作为定位元素中最温和的存在，relative定位是相对于自己当前的定位,如图，蓝色盒子定位后并不会到达左上角，因为left,right为0，所以还在自己原来的位置。

relative

但是，relative定位使用后并不脱离文档流，俗称“占着茅坑不拉屎",如图，当蓝色盒子left为200px时，红色盒子依旧没有上升到达蓝色盒子以前的位置，就是说，蓝色盒子用relative离开原来位置后，原来的位置依旧保留。

relative

其次就是absolute，absolute就没有那么温和了，设置了决定定位的元素，如果父级元素没有设置absolute或者relative或者fixed,那么该元素会以文档窗口进行偏移，如果父级元素设置了，就以父级偏移。

absolute

同时，absolute定位脱离文档流，离开了就是离开了，偏移后以前的位置就被释放出来

absolute

最后，fixed定位，首先fixed定位目标明确，就是相对于浏览器窗口进行定位，并且定位后，无论页面多长，定位后的元素雷打不动在原处，话不多说，直接上图。注意浏览器旁边的滚动条

fixed

最后，简单总结下fixed定位，霸道粗暴，直接对浏览器窗口进行定位，定位后，无论旁边如何变化，fixed定位元素绝对不动，但是同时它又是脱离文档流的，它的原位置可以有元素，但是由于优先级没有它高，所以被覆盖。

最后，三种定位本身提高了优先级，同时可以设置z-index，z-index为0的时候，和没有优先级的元素一样地位，按照文档流顺序排列，z-index为负数的时候，低于一般文档流，z-index无上限，值越大，优先级越高。同时，只有存在定位的时候，z-index才生效。