CSS position 属性 四种定位方式

 

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute 绝对定位

        通过绝对定位，元素可以放置到页面上的任何位置。

   1.脱离文档流,不会保留其之前的位置,如果元素都绝对定位,后面的会盖住前面的.
   2.如果设置了绝对定位的元素的所有父级都为static定位样,则元素相对于整个文档(document)来定位.
   3.绝对定位一定要有对应的参考位置,想让绝对定位的元素参考谁进行移动,就给谁设置position:relative.

fixed 固定定位  

   1.固定定位的元素会脱离文档流,不保留之前位置.

   2.固定定位的元素移动位置的参考是整个文档.

   固定定位一般用来实现导航栏固定效果.

relative 相对定位

   1.相对定位的元素不会完全脱离文档流,会保留之前的位置.

   2.相对定位的元素所移动位置的参考是其之前的位置.