CSS定位

CSS定位

CSS有三种基本的定位机制:普通流、定位和浮动。

普通流

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在HTML中的位置决定。

块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。

行内元素在一行中水平布置,可以使用水平padding、边框和水平margin来调整它们的间距。但是,垂直padding、边框和垂直margin不影响行内框的高度。

由一行形成的水平框称为行框,行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

定位

相对定位

元素的位置相对于它在普通流中的位置进行移动。

使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。因此,它可能会覆盖其他框。

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}
1
2
3
4
5

相对定位的框2

绝对定位

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

设置为绝对定位的元素会从普通流中完全删除,就好像该元素原来不存在一样。而且,它在定位后会生成一个块级框,而不论原来它在普通流中生成何种类型的框。

绝对定位的元素脱离普通流,所以它可以覆盖原普通流上的其他元素。可通过设置z-index属性来控制这些框的堆放次序。

#box_absolute {
    position: absolute;
    left: 30px;
    top: 20px;
}
1
2
3
4
5

绝对定位的框2

浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。

浮动示例

当把框1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。

框1向右浮动

当框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图中消失。

如果把所有三个框都向左移动,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

向左浮动

如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。

浮动换行

清除浮动

元素设置clear属性为left、right、both或none,表示它的框的指定边不会挨着浮动框。

position属性

属性值 描述
static 默认值没有定位,元素出现在普通流中
忽略top、bottom、left、right和z-index声明。
块级元素生成一个矩形框,作为文档流的一部分。
行内元素会创建一个或多个行框,置于其父元素中。
absolute 生成绝对定位的元素,相对于最近的已定位祖先元素或包含块进行定位。
元素的位置可通过left、right、top、bottom和z-index属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置可通过left、right、top和bottom属性进行规定。
类似于absolute,不过其包含块是浏览器窗口。
relative 生成相对定位的元素。
inherit 从父元素继承position属性的值。