布局样式三、position专题

position

一、position类型

• static(默认值)

  该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。

• relative

  相对定位：相对

• absolute

  相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• fixed

  固定定位：元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。。

二、异同

值	相对定位	使用方法
static	（left等）无效，基于文档流定位	基于文档流方向定位
relative	基于前一元素定位	多个元素相对位置的定位，如对齐，规律错落
absolute	基于父级元素定位	可脱离文档流，多用于页面重叠
fixed	基于浏览器定位	基于浏览器定位，多用于相对于浏览器位置固定元素不动