CSS教程系列九——相对定位、绝对定位

定位是网页布局中非常重要的概念，决定了网页的表现形式，是CSS中我们最常用到的功能之一。

学完框模型之后我们知道网页是由一个个的框组成的，那么在最简单的不包含CSS的页面里，浏览器怎样定位各种框呢？在这种情况下，浏览器会根据各个框在Html中出现的顺序，由上而下一个接一个的排列，形象一点我们把这样方式称作“流”，区别于浮动和绝对定位这两种较特殊的定位方式，这种流我们称之为“普通流”。

其实，刚才我们已经提到了CSS中三种基本的定位机制：普通流、浮动和绝对定位。其中相对定位可看作普通流定位的一部分。

1.定位的语法

语法：

position : static absolute fixed relative

取值：

• static :　 默认值。无特殊定位，对象遵循HTML定位规则 。
• absolute :　 绝对定位。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 。
• relative :　 相对定位。对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 。
• fixed : 固定定位。IE6等版本不支持。它其实是绝对定位的一个子类别，它能使元素出现在页面的相同位置处，而不随页面上下的拖动。一般使用JavaScript实现。

2.相对定位

“相对”定位，“相对”什么地方呢？相对定位是相对于文档流中的初始位置，通过设置垂直或水平距离，让这个元素移动。元素本身即使移动到了别处也要占据原来没有变化时的初始位置。相对定位的元素并没有脱离原Html流。例如：

#box {position:relative;

left:20px;

top:20px;}

3.绝对定位

绝对的意思我们都很清楚，它的功能就是让我们可以把某个元素精确的定位在某个地方。既然我们要自由的把某个元素定位在页面的某个地方，所以绝对定位的元素已经脱离了普通流。这里就像Photoshop里层的概念一样，绝对定位的元素会被放到一个新层上，它可以覆盖普通流的元素。绝对定位的元素不受普通流的影响，仿佛它们不存在一样。我们可以通过设置z-index（z就是指的z轴，各个层相互叠加垂直的方向上）属性来更改它们层叠的顺序。

绝对定位的元素的位置相对于“最近”的“已定位”的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于body。图示：