css布局学习3--position

1.position的取值有static、relative、fixed、absolute，现在分别讲述他们的效果。

2.static：是position的默认值，该值不会被positioned，一旦为其他值，都会被positioned。

3.relative：如果仅仅设置position的属性为relative，而不设置top、left、bottom、right属性，那么relative和static的效果一样，如果设置了的话，元素就会偏离原来既定的位置。但是后续元素不会考虑该元素的偏移（偏移了，并且占了原来不偏移时候的位置），该元素实际没有脱离其正常的文档流。

如图1所示，

图1

4.fixed：用于将元素固定在某个位置，无论浏览器怎么改变窗口大小，都不会影响它的位置，如图2，图3所示

图2 原来的位置

图3 浏览器缩小后的位置

5.absolute 是相对于被 positioned的祖先元素的padding edge的绝对定位（也就是它的包含块），脱离了文档流，不会占用位置（这与relative不一样），并且不会发生margin折叠。而fixed是相对于视窗进行定位的。