（16）CSS定位布局

（一）正常流

默认情况下，网页使用正常流布局，即网页中块级别元素从上向下排列，内联元素从左向右排列。如果希望元素内容的位置与正常流中出现的位置不同，就需要使用position和float属性。

（二）position属性，取值如下：

（三）框偏移属性

当对于某一个元素框的position属性设置了relative，absolute或者fixed值，该元素框也可以使用狂偏移属性，下图给出了框偏移属性，属性的值可以是长度、百分比或者auto，通常相对于包含框的范围进行计算。

（四）使用position属性和框偏移属性进行定位

1. 相对定位（position：relative）

通过相对定位，可以相对于其在正常流中框的位置进行移动。

例如：相对正常流中该元素框的的位置右移40px，上移40px的css程序如下：

position：relative；  left：40px； top：-40px；

注意：1. 通常left和right，top与bottom只同时指定两个中的一个值，如果同时指定了一对值，则left与right使用left的值，top与bottom使用top的值。2. 由于是相对于正常流中框的位置，故上移应为负值。3. 相对定位不影响正常流中其他框的位置（若有三个段落，对第二段使用相对定位，那么第三段还处于正常流的位置，不受第二段影响），故相对定位可能导致框重叠。

2. 绝对定位（position：absolute）

绝对定位将元素从正常流中完全独立出来。

例如：相对父元素左上角，右移40px，上移40px的css程序如下：

position：absolute；  left：40px； top：-40px；

注意：1. 通常left和right，top与bottom只同时指定两个中的一个值，如果同时指定了一对值，则left与right使用left的值，top与bottom使用top的值。2. 绝对定位是以父元素左上角为基准，而相对定位是以其自身正常流的位置为基准。3. 绝对定位将元素从正常流中完全独立出来（若有三个段落，对第二段使用绝对定位，那么第三段会处于第二段正常流中应该出现的位置，因为第三段根本不知道第二段的存在，以为自身就是第二段）4. 发生重叠时，除非指定了z-index属性，否则绝对定位的元素总是出现在线对定位元素之上。

3. 固定定位（position：fixed）

该值指示的元素不仅从正常流中完全独立，而且当用户上下拖动浏览器时该框不作移动。

若我们想要在浏览器的最顶端始终展示一个横幅，则可以使用以下配置：

position：fixed；top：0px；left：0px；width=100%（浏览器宽度的100%）；

4. z-index属性：用于当元素重叠时，指定哪个框优先显示（出现在上方）

z-index属性的值是一个数字，数字越大，元素的显示就越接近顶部。

（五）使用float属性浮动定位

1. float属性

float属性可以将元素独立于正常流之外，并且尽可能远的放置在父元素框的左边或者右边，父元素中的其他元素将环绕在有float属性的元素周围。若一个元素设置了float属性，就必须设置width属性，以指明浮动框占包含框的宽度，否则默认占用100%的宽度。float属性取值如下：

2. clear属性

当使用了浮动框，其他内容会环绕在浮动元素周围，我们可以通过clear属性指定浮动框不能被环绕，取之如下：