CSS 中的定位 Position static relative absolute fixed 是如何工作的

毋庸置疑，CSS 中的 定位 对于从事重构或者前端的人来说，其占用非常重要的地位，但是对于初学者来说，却又有几点不是很清楚，这里就向大家介绍下 CSS  中的 定位 是如何工作的。

首先，我们来看下，什么是 定位。

当浏览器下载页面内容的时候，按下载的 HTML 页面内容的顺序（例如，html、body、head、div、p等），同时就开始渲染页面，而 定位 则就是决定这些元素如何显示，例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位，这里一共有4种方式来定义 定位，其分别是：static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。

Static 定位

即静态定位，也就是在制作 HTML 页面时，元素如何排列，则定位就如何排列。从上往下的顺序。没什么可解释的。

Relative 定位

即相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

其写法一般如下：

  .relativeDiv{
	/*
		Moving the div to the top-left
		from where it would normally show:
	 */
	position:relative;
	top:-50px;
	left:-100px;
}

Absolute 定位

即固定定位，他是参照浏览器的左上角，配合 TOP、RIGHT、BOTTOM、LEFT 进行定位，在没有设定TOP、RIGHT、BOTTOM、LEFT，默认依据父级的做标原始点为原始点。如果设定TOP、RIGHT、BOTTOM、LEFT 并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TOP、RIGHT、BOTTOM、LEFT决定。

例如有 A 和 B 两个 Div，当 A 的 position 为 relative 时，B的 position 为 absolute 时，B才有效。这时候 B 的left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。此例子将绝对定位和相对定位结合起来，同时也进行比较。下面例子中 parentDiv 和 absoluteDiv 可以分别看做 A 和 B。

注意：网页居中的话用Absolute容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。网页居中应该用margin:0 auto;text-align:center;来进行。

其一般写法为：

.parentDiv{
	/* Absolute and Fixed positioning would work as well: */
	position:relative;
}
.absoluteDiv{
	/*
		Displaying the div 50px from the right and 90px from
		the top of its parent because of the explicit positioning
	 */
	position:absolute;
	right:50px;
	top:90px;
}

Fixed 定位

即固定定位，也就是说使用此 CSS 属性之后，相应的元素就会脱离文档流，而变成在浏览器窗口中相应位置固定不动的元素，当然，也包括滚动条滚动时。其仍旧不移动（相对位置）。但是 IE6 不支持此属性，不过也可以通过 Hacks 来解决，万恶的 IE 。IE7 及以上还有其他现代浏览器都支持。详细信息请参阅。

其一般写法为：

.fixedDiv{
	/*
		Fixing the div 20 px from the bottom
		of the browser window:
	 */
	position:fixed;
	right:20px;
	bottom:20px;
}

对了，忘了加比较 NB 的演示了，演示点击这里。