1. 引言
在网页设计中，CSS即层叠样式表，用来控制网页样式并允许样式与内容分离的一种标记性语言 [1] 。利用CSS的定位属性可以实现不同的定位方式，结合DIV等块级元素可以实现页面布局，而且可以更灵活。本文通过举例并进行分析说明，给出使用CSS的定位属性进行网页布局的使用方法和注意事项，达到掌握的目的。
2. 使用举例
2.1. 相关概念
1) 定位(position)属性
在CSS样式中，position定位属性定义元素区域的相对空间位置，可以相对于其上级元素，或相对于另一个元素，或相对于浏览器窗口 [2] 。position定位属性有4种取值，CSS语法如下：
position:static|relative|absolute|fixed
参数包括了四种属性值：static、relative、absolute和fixed，它们决定了元素区域的布局方式。
static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布 [3] 。
relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离，可以使用CSS的属性如left、top、right、bottom来设置位置。
absolute绝对定位，位置将依据浏览器左上角的0点开始计算，使用CSS属性left、top、right、bottom来设置位置。
fixed固定定位与绝对定位类似，是绝对定位的子类别，相对于浏览器窗口进行定位，当拖动浏览器窗口滚动条时，该元素位置始终保持不变，使用CSS属性left、top、right、bottom来设置位置 [4] 。
2.2. 使用举例
1) 静态定位
静态定位是position属性的默认值，即该元素出现在文档的常规位置，遵循HTML的标准定位规则，即按照“前后相继”的顺序进行排列和分布，不会重新定位。
例题1：完成页面，效果如图1。
对应的主要代码如下：
Figure 1. Web layout 1
图1. 网页布局1
静态定位
id =box-1
id =box-2
id =box-3
分析：从上可以看到页面中分别定义了id=”top”、id=”box”和id=”footer”3个Div容器，彼此是并列关系。id=”box”的容器又包含id=”box-1”、id=”box-2”、id=”box-3”这3个容器，彼此也是并列关系。题中div元素的定位采用定位属性的默认值，即静态定位方式。静态定位的使用场景一般来说不用写，除非是想要覆盖之前设置的定位。
2) 相对定位
相对定位(position:relative;)指的是通过设置偏移量，让这个元素“相对于”它原本的位置进行移动 [5] 。
例题2：在例题1的基础上完成页面，效果如图2。
Figure 2. Web layout 2
图2. 网页布局2
在例题1的基础上，只需将id=”box”的元素的CSS定义修改为如下代码即可：
#box {
width: 400px;
background-color: #FF6;
padding-left: 5px;
position:relative; /*设置相对定位*/
top:50px; /*相对于例题1的位置，向下移动50px*/
left:50px; /*相对于例题1的位置，向右移动50px*/
}
分析：本例中，id=”box”的元素进行了相对定位属性设置，相对于在文档流(id=”container”)中的原来位置向下并且向右各移动了50px，原来的位置不但没有让id=”footer”的元素占据，反而还将其覆盖了一部分。若此处不设置移动位置即没有top，left设置，则相对定位没有效果 [6] 。相对定位的使用场景和absolute一起使用，常用于logo的定位。
3) 绝对定位
用“position:absolute;”表示绝对定位，使用绝对定位的对象可以被放置在文档中的任何位置，位置将依据它的包含框(浏览器左上角的0点或已经定位的包含框)开始计算。
例题3：在例题1的基础上完成页面，效果如图3。
与例题1相比，主要修改id=”box-1”区域部分，代码如下：
#box-1 {
width:350px; /*设置元素宽度*/
Figure 3. Web layout 3
图3. 网页布局3
height:100px; /*设置元素高度*/
background-color:#C9F;/*设置背景色*/
padding-left:5px; /*设置左内边距5px*/
margin-left:20px; /*设置左外边距20px/
position:absolute; /*设置绝对定位*/
top:50px; /*设置距顶部距离*/
left:400px; /*设置距左边距离*/
}
分析：通过效果图可以看到，当id=”box-1”的元素使用绝对定位后，其位置相对于浏览器0点向下和向右移动，页面中的其他元素位置也相应发生变化，id=”box-2”、id=”box-3”和id=”footer”这些元素都上移。由此可见，使用绝对定位元素的位置与文档流无关，且不占据空间，即不再遵循HTML的标准定位规则。文档中其他元素的布局就像绝对定位的元素不存在一样 [7] 。绝对定位的使用场景和relative一起使用，常用于logo的定位。
4) 相对定位与绝对定位的混合使用
例题4：在例题1的基础上结合例题2和例题3完成页面，使得Id=”box-1”的元素相对于Id=”box”的元素进行绝对定位，效果如图4。
Figure 4. Web layout4
图4. 网页布局4
与例题1相比，主要修改box，box-1区域部分，修改部分代码如下：
#box {
width: 400px;
background-color: #FF6;
padding-left: 5px;
position:relative; /*设置相对定位*/
}
#box-1 {
width:200px; /*设置元素宽度*/
height:100px; /*设置元素高度*/
background-color:#C9F; /*设置背景色*/
padding-left:5px; /*设置左内边距5px*/
margin-left:20px; /*设置左外边距20px*/
position:absolute; /*设置绝对定位*/
top:0px; /*设置距顶部距离*/
right:0px; /*设置距左边距离*/
}
分析：相对定位与绝对定位的混合使用。首先对Id=”box”的元素进行相对定位，使得Id=”box”中的所有元素成为它的子元素，它的子元素将以它为基准进行定位。设置Id=”box-1”的元素进行绝对定位，使其相对于Id=”box”的父元素进行绝对定位。设置Id=”box-1”元素距离Id=”box”元素顶部距离0 px，距离右边距离0 px，所以Id=”box-1”元素被置于Id=”box”元素的右上角，实现了子元素相对于父元素进行定位。若删除id=”box”的position属性，则box1元素相对于浏览器窗口进行绝对定位。
5) 固定定位
固定定位(position:fixed;)是绝对定位的子类别，是相对于视窗固定的，就算页面文档发生了滚动，它也会一直停留在固定的位置。
例题5：固定定位属性的应用，效果如图5。
Figure 5. Web layout4
图5. 网页布局5
对应的主要代码如下：
固定定位示例
分析：将Id=”tt”的元素固定定位，id=”cc”的元素的高度让浏览器出现垂直滚动条，当拖动滚动条向下滚动页面时，tt元素固定定位，相对于浏览器位置不变，如图5所示。固定定位的使用场景常用于广告图片。
3. 总结
通过以上的例题和分析可以得出CSS的定位属性对页面布局的作用如下：
1) static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布，是最常用的默认定位方式。
2) relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置(即使用默认定位的位置)设置一定的偏移距离。可以使用CSS的属性left、top、right、bottom来设置位置和绝对定位结合常用于网站logo的定位。
3) absolute绝对定位，网页元素不再遵循HTML的标准定位规则，将以该元素的上级元素为基准位置或依据浏览器窗口设置偏移量进行定位，可以使用CSS属性left、top、right、bottom来设置位置。网页元素的位置相互独立，没有影响，相对定位和绝对定位混合使用，使用绝对定位的元素相对于使用相对定位的元素进行绝对定位。
4) fixed固定定位，相对于浏览器窗口进行定位，当拖动浏览器窗口滚动条时，该元素位置始终保持不变，可以使用CSS属性left、top、right、bottom来设置位置，常用作广告图片的定位。
5) 特别注意一定要分清每种定位方式的不同，结合适用场景来合理地使用每种定位方式。
4. 结束语
本文通过例题对CSS的定位属性进行了举例和分析，总结了使用规则，提出了使用时的注意事项，特别是通过结合例题对具体定位的概念进行了剖析和学习，在网页布局中，可以根据页面布局的需要，选择合适的定位属性进行布局。
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
