相对定位与绝对定位

1、CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时候就需要设置绝对定位，来实现如图1所示的效果。图1 对联广告一、position的三种定位方式图1演示了绝对定位的应用，position定位属性主要包含relative相对定位、absolute绝对定位和static默认定位三种定位方式，下面分别对这三种定位方式进行讲解。（1）relative相对定位，相对于文档流原来位置的偏移，原占位大小完整保留。相对

2、定位常用的属性、值及其含义如下表所示。 定位属性属性值说明定位方式positionposition:relative;采用相对定位，相对于本来位置的偏移偏移量leftleft:20px;距离参照物左侧20pxrightright:50px;距离参照物右侧50pxtoptop:10px;距离参照物顶部10px，相对定位参照物为元素的本来位置bottombottom:100px;距离参照物底部100px一般情况下，right和left或top和bottom不应同时存在。他们之间有个公式。left值等于-right，同样的，top值等于-bottom，例如：“left:10px;”等价于“right

3、:-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/css">di

4、v    color:#fff;    font:bold 22px 黑体;    width:150px;    height:120px;    background:red;    float:left;.div2    height:150px;    backgroun

5、d:#ff7300;    position:relative;    top:10px;    left:20px; .clear    background:blue;< /style>< /head>< body>< div>第1块< /div>< div class="div2">第2块< /div>< div clas

6、s="clear">第3块< /div>< /body>< /html> 从上面的代码中可以知道，相对定位有如下3个特点：参照物：相对定位是相对于未设置定位方式前的位置，其参照物就是原来位置。偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。占位：相对定位偏移后的元素，其占有的位置是原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面，但不会增加高度和宽度。（2）absolute绝对定位，完全脱离文档流，是相对于第一个非默认定位方式的上级元素的距离。相对定位的元素大小会在文档流原来位置占去相同大小的页面空间。

7、而绝对定位则不再占原文档流页面的任何空间。其常用属性语法语义与相对定位类似，例如“position:absolute;top:200px;left:150px;”。定位方式的区别导致了参照物区别。具体参照物为上级元素中，第一个存在非默认定位方式的元素，它完全脱离了文档流。下面图2页面中的代码进行修改，只修改样式.div2，修改为绝对定位，为方便参照，加大了偏移量，其他代码均没有任何变化，.div2修改后的代码如下所示。 .div2    height:150px;    background:#ff7300;

8、60;   position:absolute;    top:180px;    left:200px; 修改后在浏览器中运行的效果如图3所示，第2块风格改为绝对定位后，位置也发生了变化，并且不再占有原来的位置。图3 绝对定位学习完绝对定位，可以发现绝对定位也有3个特点：参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠元素

9、（如“第3块”）的上面。现在为三个div增加一个上级div，并且设置上级div的相对定位为relative，上外边距设置50px，左边距设置为60px，修改后的页面代码如下所示。 < html>< head>< title>绝对定位< /title>< style type="text/css">.div1    color:#fff;    font:bold 22px 黑体;    width

10、:150px;    height:120px;    background:red;    float:left;.div2    height:150px;    background:#ff7300;    position:absolute;    top:180px;   

11、60;left:200px; .clear    background:blue;.div_big    position:relative;    top:50px;    left:60px;< /style>< /head>< body>  < div class="div_big">    < d

12、iv class="div1">第1块< /div>    < div class="div1 div2">第2块< /div>     < div class="div1 clear">第3块< /div>  < /div>< /body>< /html>修改完上面的代码后，在浏览器中运行的效果如图4所示。 图4 绝对定位及相对定位的

13、应用position还有一种类似的定位方式为固定定位，值为fixed。同样完全脱离文档流，但参照物为浏览器的可见范围。但只工作在IE7.0的strict模式下，这里稍微提下。（3）static静态无偏移，不填时默认属性，偏移量属性无效，属于常规文档流。虽然这个参数只有在JavaScript中实现某些效果时使用，但必须理解static定位方式对应的常规文档流概念。在前面内容中，我们学习并不断涉及到文档流的概念，我们知道，它是页面内容的组织方式，即从上至下，先分行；然后每行根据元素的特点放置元素：块级元素独占一行，行级元素从左至右排列。这种组织方式就是往容器中放置流体。流体即水、油等液体，特点是自

14、动紧密排列填充容器，就好像往水缸倒水。而非流体则是无此特点，如屋子里摆放各类家具。常规文档流中的“常规”，是指除浮动和绝对定位外，网页显示元素的默认组织方式。相对于浮动与绝对定位的特殊情况，常规文档流可以简单的描述为“原来位置”。上面我们讲解了定位属性中的三种定位方式，其中相对定位与绝对定位，会与原文档流形成堆叠，覆盖在其他重叠位置元素的上面。那么：（1）为什么相对或绝对定位元素会位于常规文档流前面呢？（2）当有多个相对或绝对定位元素存在时，他们又应该如何排列顺序？要回答这些问题，必须理解并掌握叠放层次z-index属性。二、叠放层次属性z-indexz-index属性只对非默认定位方式的元素

15、（相对、绝对与固定定位）有效，默认值为1，其值为正整数。值越大，叠放在越前面。其语法格式如：“z-index:2”。在绝对定位效果图的例子中新增1个绝对定位的div，并设置第2块叠放层次为“z-index:2”，修改后的代码如下所示。 < html>< head>< title>相对定位< /title>< style type="text/css">div    color:#fff;    font:bold 22px 黑体;

16、60;   width:150px;    height:120px;    background:red;    float:left;.div2    height:150px;    background:#ff7300;    position:relative;    top:1

17、0px;    left:20px;    z-index:2; .clear    background:blue;.div4    position:absolute;    top:100px;left:100px;    background:green;< /style>< /head>< body>< d

18、iv>第1块< /div>< div class="div2">第2块< /div>< div class="clear">第3块< /div>< div class="div4">第4块(未设置z-index)< /div>< /body>< /html> 在浏览器中运行上面的代码，效果如图5所示。 图5 叠放层次的应用在图5中，可以很明显的看到，叠放属性是“z-index:2”的第2块位于最上面，第4块其次，最底下是未

19、设置绝对定位的文档流。第4块并未设置z-index的值，但绝对定位的元素，其z-index默认值为1。我们再把上面代码略修改，把第2块的“z-index:2”属性去掉。那么，它的z-index值应该也是默认值1，这时就出现1个问题，同层次如何确定叠放顺序呢？在浏览器中运行修改后的代码，效果如图6所示。 图6 叠放层次后来者居上从图6中我们很容易得出答案，同层间，按代码中出现顺序排，后出现的居上。因为叠放层次值，也可以理解为2在正常顺序中位于1后面，因此，可以很简单的把这些叠放层次的组织顺序总结为“后来者居上”：（1）叠放层次值有大小差异，大的居上。就像建房子，地基即文档流页面。楼层数越大则在越

20、上面。（2）同层间，后出现的居上。三、实例演示学习完定位属性，特别是绝对定位及叠放层次z-index属性后，就可以实现页面中常用到的带关闭按钮的对联广告效果，具体效果如图7所示。 图7 带关闭按钮的对联广告要实现上述效果，其实比较简单：1）在页面中放置4个元素并设置为绝对定位2）设置关闭图片的叠放层次为“z-index:2;”3）根据效果图，确定：左边图的左边界“left:40px;”右边图的右边界“left:40px;”统一上边界，“top:30px;”。理清思路后，实现上述效果的代码如下所示。< html>< head>< title>带关闭按钮的对联广

21、告< /title>< style tylie="text/css">body    margin:0px;    padding:0px;#advLeft,#advRight,#closeLeft,#closeRight    position:absolute;    top:30px;#advRight,#closeRight    right:40px;#advLeft,#closeLeft