13.4　CSS定位

CSS定位是网页布局中非常重要的技术，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。通常，可以利用CSS定位属性来建立列式布局，将布局的一部分与另一部分重叠。同时，它还可以用来完成需要使用多个表格才能完成的任务。相关的定位属性如表13-15所示。

在表13-15中，可以通过使用position属性来选择4种不同类型的定位方式来进行页面布局：

1）static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2）relative：元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

3）absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

4）fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

13.4.1　绝对定位

当把position属性值设为absolute时，即表示被绝对定位了。绝对定位是定位方法中使用最为广泛的一种，这种方法能够很精确地将元素移动到你想要的任何位置。使用绝对定位的元素前面的或者后面的元素会认为这个层并不存在，即这个元素浮于其他元素之上，它是独立出来的，类似于Photoshop软件中的图层。绝对定位使元素的位置与文档流无关，因此不占据空间。所以，position属性的absolute值用于将一个元素放到固定的位置非常方便。示例如下面的代码所示：

div

{

position:absolute；

left：25px；

top：50px；

}

可以用图13-11来解释上面的样式。

图　13-11　绝对定位

如图13-11所示，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

通常，如果对元素设置了绝对定位，默认情况下，元素将紧挨着其父元素对象的左边和顶边，即父元素对象左上角。定位的方法为在CSS中设置元素的top（顶部）、bottom（底部）、left（左边）和right（右边）的值，这4个值的参照对象是浏览器的4条边。

当有多个绝对定位元素放在同一个位置时，应该显示哪个元素的内容呢？类似于Photoshop的图层有上下关系，绝对定位的元素也有上下关系，在同一个位置只会显示最上面的元素。在计算机显示中，把垂直于显示屏幕平面的方向称为z方向，

CSS绝对定位的元素的z-index属性对应这个方向，z-index属性的值越大，元素越靠上，即同一个位置上的2个绝对定位的元素只会显示z-index属性值较大的。当元素都没有设置z-index属性值时，默认后面的靠后的元素z值大于前面的绝对定位的元素。

13.4.2　相对定位

与绝对定位不同，如果对一个元素进行相对定位（即设置position属性值为relative)，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

同时，相对定位的元素的top（顶部）、bottom（底部）、left（左边）和right（右边）属性参照对象是其父元素的4条边，而不是浏览器窗口。并且相对定位的元素浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤”上来。因此，移动元素会导致它覆盖其他框。定义示例如下面的代码所示：

div

{

position:relative；

left：25px；

top：50px；

}

由上面的样式可知，如果将top设置为25px，那么框将在原位置顶部下方25像素的地方。如果left设置为50px，那么会在元素左边创建50像素的空间，也就是将元素向右移动。

13.4.3　固定定位

相比于绝对定位与相对定位，固定定位比较简单。当把position属性值设置为fixed时，即表示被固定定位了。其实，固定定位和绝对定位非常类似，不过固定定位被定位的元素不会随着IE滚动条的拖动而变化位置。在视野中，固定定位的元素的位置是不会改变的。定义示例如下面的代码所示：

div

{

position:fixed；

left：25px；

top：50px；

}

值得注意的是，fixed值在许多浏览器中并不支持。如IE6.0版本的浏览器就不支持fixed值的position属性，所以网上类似的效果大部分都是采用JavaScript脚本编程来完成的。