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。图示:

没有评论: