【前端攻城狮之路】position定位机制

CSS position属性：

static——默认方式，形成文档流

relative——相对于原来（普通流）的位置进行偏移

演示地址：点击打开链接

absolute——脱离原来的文档流，独立定位，display属性变成block，可能覆盖其他成分。

演示地址：点击打开链接

fixed——固定定位，定位坐标系是整个视窗，网页下拉时保持不动

演示地址：点击打开链接（请在全屏下查看演示）

知识点补充

1. 设置了浮动的元素也脱离普通的文档流（同absolute），进入浮动流空间（里面是所有设置了浮动的元素），故可能与普通文档流中元素发生重叠覆盖。

演示地址：点击打开链接

注：经测试，浮动的div可以覆盖普通文档流中的div，但是对于文本则不会覆盖，而是会产生文字环绕效果（行框围绕浮动框）。

2.margin-left和left两种位移方式

机制：

margin-left——通过设置元素的外边距来达到位移的效果

left——相对于最近的父对象进行定位，常与position:absolute联用进行绝对定位

效果：

position:relative时，两种方式效果相同，都是以父元素为基准

position:absolute时，由于元素脱离文档流，left此时以浏览器窗口为基准，使绝对定位生效；而margin_left仍是以父元素为基准。