Position属性四个值的区别和用法

---

• static(静态定位)
  默认值, 没有定位, 元素出现在正常流中 ( 忽略 top, bottom, left, right 或者 z-index 声明 )
• relative(相对定位)
  生成相对定位的元素, 通过top, bottom, left, right 的设置相对于其正常 ( 原先本身 )进行定位, 可通过 z-index 进行层次分级.
• absolute(绝对定位)
  生成绝对定位的元素, 相对于 static 定位以外的第一个父元素进行定位, 元素的位置通过”left”, “top”, “right”, 以及 “bottom”属性进行规定, 可通过z-index进行层次分级.
• fixed(固定定位)
  生成绝对定位的元素,相对于浏览器窗口进行定位, 元素的位置通过”left”, “top”, “right” 以及 “bottom”属性进行规定, 可通过z-index进行层次分级.

relative和absolute的区别

relative定位的元素脱离正常文档流,但是其在文本刘中的位置依然存在.
absolute定位的元素脱离正常文档流,但与relative的区别是其在正常流中的位置不再存在

注意:

如果用position来布局页面, 父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为不受父级元素的padding的属性影响,当然你也可以用position, 不过到时候计算的时候不要忘记padding的值(因为父级的padding会影响relative)