相对定位和绝对定位.doc

CSS定位与定位应用 定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时候就需要设置绝对定位，来实现如图1所示的效果。 图1 对联广告 一、position的三种定位方式 图1演示了绝对定位的应用，position定位属性主要包含relative相对定位、absolute绝对定位和static默认定位三种定位方式，下面分别对这三种定位方式进行讲解。（1）relative相对定位，相对于文档流原来位置的偏移，原占位大小完整保留。相对定位常用的属性、值及其含义如下表所示。 定位属性 属性 值 说明 定位方式 position position:relative; 采用相对定位，相对于本来位置的偏移 偏移量 left left:20px; 距离参照物左侧20px right right:50px; 距离参照物右侧50px top top:10px; 距离参照物顶部10px，相对定位参照物为元素的本来位置 bottom bottom:100px; 距离参照物底部100px 一般情况下，right和left或top和bottom不应同时存在。他们之间有个公式。left值等于-right，同样的，top值等于-bottom，例如：“left:10px;”等价于“right:-10px;”。我们根据上表中对relative知识的描述，来看图2中相对定位元素“第2块”的特点。 图2 相对定位 在图2中，第2块内容本应该在虚线范围内，但是它却移动了位置，主要是在图2页面的第2块中加入“position:relative;top:10px;left:20px;”代码，第2块实现了相对定位，并且左、上都有一定的偏移量，所以就呈现了如图2所示的效果。图2页面的关键代码如下所示： html head title相对定位 /title style type=text/cssdiv{????color:#fff;????font:bold 22px 黑体;????width:150px;????height:120px;????background:red;????float:left;}.div2{????height:150px;????background:#ff7300;????position:relative;????top:10px;????left:20px;} .clear{????background:blue;} /style /head body div第1块 /div div class=div2第2块 /div div class=clear第3块 /div /body /html 从上面的代码中可以知道，相对定位有如下3个特点：①参照物：相对定位是相对于未设置定位方式前的位置，其参照物就是原来位置。②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。③占位：相对定位偏移后的元素，其占有的位置是原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面，但不会增加高度和宽度。（2）absolute绝对定位，完全脱离文档流，是相对于第一个非默认定位方式的上级元素的距离。相对定位的元素大小会在文档流原来位置占去相同大小的页面空间。而绝对定位则不再占原文档流页面的任何空间。其常用属性语法语义与相对定位类似，例如“position:absolute;top:200px;left:150px;”。定位方式的区别导致了参照物区别。具体参照物为上级元素中，第一个存在非默认定位方式的元素，它完全脱离了文档流。下面图2页面中的代码进行修改，只修改样式.div2，修改为绝对定位，为方便参照，加大了偏移量，其他代码均没有任何变化，.div2修改后的代码如下所示。 .div2{????height:150px;????background:#ff7300;????position:absolute;????top:180px;????left:200px;} 修改后在浏览器中运行的效果如图3所示，第2块风格改为绝对定位后，位置也发生了变化，并且不再占有原来的位置。 图3 绝对定位 学习完绝对定位，可以发现绝对定位也有3个特点：①参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。③占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠