position的四个属性

css的position属性可以让元素相对于它的正常位置、父元素、浏览器窗口进行偏移。

position属性有五个可能的值：static、absolute、relative、fixed、inherit.

static

是position的默认值，元素出现在正常的文档流中，不产生任何偏移，设置top，bottom，left，right，z-index无效。

absolute

元素值为absolute时元素会脱离文档流，不会占用原来的空间（在文档流中此元素被删除），后面的元素会顶替上去，设置了position:absolute的元素无论是块级元素还是行内元素都会变成块级元素,元素就可以设置width、height.

当元素没有设置width、height时，通过其父元素(父元素需要设置position:relative;如果没有设置则认定浏览器为其父元素)的width、height和top/bottom/left/right来确定width、height.

相对于static定位以外的第一个父元素进行定位，如果父元素未设置position:relative;则相对于body进行定位.

relative

元素值为relative时，元素为相对定位，相对于其正常位置定位，但此元素设置relative后不会脱离文档流，仍然占用元素空间，所以其后的元素不会顶替此元素位置.

fixed

元素值为fixed时，生成绝对定位，元素相对浏览器窗口进行定位.

inherit 

规定从父元素继承position属性的值.