毋庸置疑,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 的演示了,演示点击这里