在 CSS+DIV 网页布局中， 页面元素的表现方面最重要的是掌握 CSS 的盒子模型以及盒子在浏览器中的排列定位。
网页中各个盒子模型都必须要有自己的定位， 从而可以搭建出整个网页的结构。 CSS+DIV 主要有 3 种基本的定位：
即标准流定位、 Float 定位和 Position 属性定位。 默认的方式都是标准流定位， 标准流是按顺序垂直地排列块级元素，所以肯定不能满足形式多样的页面布局要求； 而 Float 浮动定位可以让网页元素垂直排列成水平方向， 还可以形成图文混排的效果， 但仅仅是这样仍难满足灵活多变的网页结构。 而 Position 定位机制可以通过设置属性和偏移值能让DIV 块定位到网页或者是父框的所有位置 , 其定位功能强大灵活， 是网页布局中不可缺少的定位机制。
1 Position 定位的属性。
Position 属性定位有 : 相对的 （relative）、 绝对的 （ab-solute） 、 固 定 的 （ fixed） 和 静 态 的 （ static） 4 种 . 默 认（static） 不响应定位属性， 盒子模型按照浮动方式或标准流排列。 Fixed 和 absolute 相似， 不一样的是 Fixed 总是按照浏览器的窗口为基准来定位。 Position 属性取值中 relative和 absolute 用得最多。
Top （上）、 bottom （下）、 left （左）、 right （右） 是 4 个偏移值， 为了使网页元素从基准位置发生位移， 这 4 个属性经常要和定位属性配合使用， 表示的是块的边界离页面边框的距离， 或各个边界离原来位置的距离。 只有当 Posi-tion 属性设置为绝对或相对时才有效， 如果设置为静态， 则子块将不会有任何变化。 偏移属性值可以设置为绝对像素或相对百分比。
2 相对定位。
使用 relative 定位的盒子模型是依据标准流而排列的，然后使盒子模型参照它们原来的位置发生偏移。 设定了相对属性的网页元素仍然在标准流中， 在它后面的网页模型仍然按照标准流进行排列。
可以看到元素设置为相对定位后有两点会发生：
（1） 元素仍然按标准流排列 , 也就是说元素仍然占据着原来的位置。
（2） 由于元素设置了相对定位 , 它有可能会和其他DIV 块发生重叠。
由于有了以上两种定位特性， 所以设置了相对定位的网页元素的子元素可以以父元素为基准来进行定位， 让设置了相对定位的元素成为父框 （包含框）， 这样就有助于子元素进行绝对定位。
3 相对定位实例-鼠标滑过时向右下偏移的链接。
在有些网页中， 当鼠标滑动到链接上方时， 超链接的位置会发生细微的移动， 如向左下方偏移， 让人觉得链接鼠标拉上来了。
这种效果的制作原理并不复杂， 主要就是运用了相对定位。 在 CSS 种设置超链接元素为相对定位， 当鼠标滑过时， 就让它相对于原来的位置发生偏移。 只要为链接添加下面的 CSS 代码就可以了。
a:hover{color:#ff0000;position:relative;right:2px;top:3px; }
4 绝对定位。
绝对定位和相对定位不同， 是根据它的父框 （包含框）为基准来定位的， 网页元素完全不占据标准流位置。 这意味着它后面的盒子模型完全不受它的影响， 仍然按照标准流进行排列。
元素设定了绝对定位之后， 它的位移值是依据它的父框 （包含框） 而设定的， 从父框 （包含框） 的边框内侧到子元素的外侧之间的距离。 但要注意的是， 设置为绝对定位的网页元素， 并不是总以浏览器窗口为基准来定位的。 所以， 改变父框的 padding 值对定位元素的位置不会有影响。
5 绝对定位的应用实例-轻轻松松给图片签名手里有漂亮的图片需要放到页面上， 而且希望给图片加上个人信息， 那么完全可以不用其他图像处理软件， 用CSS+DIV 的定位属性可以实现图片的签名效果。 如图 2 所示。
先把图片插入到网页的<DIV>块中， 然后把签名写到另外一个<DIV>块中， 利用 Position 的绝对定位将签名盒子移动到图片盒子上， 再设置相应的字体和颜色即可。 图像和文字的代码如下：
#a1 {padding:10px;float:left;}
#a2{color:#F00;position:absolute;left:100px;top:205px;}
在 body 中的应用如下：
<div id=“father”>
<div id=“a1”> <img src=“1.png” ></div>
<div id=“a2”>Isaac photo</div>
</div>
除了图片签名的应用之外， 绝对定位还可以用在制作图片文字阴影、 下拉菜单等应用上， 但更多的是和相对定位一起合作， 制作出更好的网页效果。
6 绝对定位和相对定位应用举例-制作缺角导航条
很多时候， 相对定位和绝对定位不是单独使用的， 往往是一起合作使用， 利用 Position 的绝对定位和相对定位，可以制作出很多有特色美观又实用的导航条， 其中， 缺角导航是一个典型的应用。
首先制作好基础部分-如图 4 所示的水平导航条， 水平导航条可以不用 Position 定位就可以实现， 如图 4 所示。
缺角标记是把缺角的盒子模型叠放到导航选项盒子模型上来实现的。 形成缺角的盒子实际上是一个空元素， 该元素的左边框是 8px 宽的白色边框 （要隐藏）， 下边框是8px 宽的蓝色边框 （和导航项颜色一样 ）， 它们交汇就形成了斜边效果。
在制作过程中， 先设置导航项的盒子为相对定位， 让它作为基准框， 而缺角标记盒子是以导航项作为包含框来进行定位， 所以必须让导航项成为一个包含框， 再将缺角标记设置为绝对定位， 让缺角标记盒子以导航项为基准来进行定位。 同时由于导航条不需要改变在标准流中的位置，所以应该设置为相对定位无偏移。 在代码中直接用 a 元素的盒子做导航， 在 a 元素中添加任意一个行内元素， 在这里选择 b 元素， 它的内容为空， 这样才能利用边框交汇做三角形， 结构代码如下：
<a href=“#”><b></b>首页</a>
<a href=“#”><b></b>中心简介</a>
<a href=“#”><b></b>政策法规</a>
<a href=“#”><b></b>常用下载</a>
而具体的 a 和 b 的代码如下：
a {font-size: 14px;padding:5px 9px 3px 9px;border-bottom:7px solid #88bb22;background-color:#79bcff;color:#333;display:block;float:left;margin:0 4px;position:relative;}
a b{border-left:8px solid #fff;border-bottom:8px solid #79bcff;width:0px;height:0px;position:absolute;left:0px;top:0px;}
跟 Position 属性相关的还有 z-index、 overflow 和 clip 属性。 z-index 属性是用来调整定位时重叠块之间的上下位置； overflow 是用来设置显示网页元素盒子中的内容是否溢出； clip 是当摆放图片的面积不够时， 可以用来裁切。 能够熟练掌握这些属性的意义和运用， 那样会制作出更好的网页效果。
参考文献：
[1] 曾顺。 精通 CSS+DIV 网页样式与布 [M] . 北京 : 人民邮电出版社， 2009, （11）。
[2] 陈承欢 . XHTML+CSS 网页布局与美化案例教程 . 北京： 高等教育出版社， 2010, （8）。
立即询价
