position定位

position属性有四个值，分别是static、reletive、absolute、fixed。

1、通常情况下，position的值默认是static，就是没有定位。元素处于正常的文档流中，top、left、right、bottom对于元素不起作用。z-index对元素也没有作用。

2、position：reletive；相对定位， 元素相对于原来的位置定位。不脱离文档流，页面上保存有它的位置，占位空间依然存在。

下面的图蓝色块设置position：reletive；图二给元素加上left:50px;top:30px;当前定位元素发生偏移，但是文档中仍保留有它的占位空间。它依旧存在于正常的文档流中。它的偏移也不会把别的块从文档流中原来的位置挤开，它会覆盖在与它有重叠的其它文档流元素之上，而不是把它们挤开。

图一来自网络 图二来自网络

position：reletive与margin不同，margin正数是向外扩展空间，会影响其他元素的布局。而reletive不会，reletive只对当前元素有影响，是对当前元素的定位，不会影响其他页面元素的布局。

可以通过z-index设置重叠元素的堆叠顺序。

3、position：absolute；绝对定位，脱离了正常的文档流，设置了absolute绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。即它相对于有absolute，reletive，fixed定位的第一个父级元素定位。（不设置top或者left值的话，元素与position：static的位置相同。）

4、position：fixed；相对于浏览器窗口定位，固定在浏览器屏幕的某一个位置上，不随滚动条的滚动而发生位置变化。