相对定位与绝对定位.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/css">
div{
    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个特点：
①参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。
②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。
③占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面。
现在为三个div增加一个上级div，并且设置上级div的相对定位为relative，上外边距设置50px，左边距设置为60px，修改后的页面代码如下所示。
< html>
< head>
< title>绝对定位< /title>
< style type="text/css">
.div1{
    color:#fff;
    font:bold 22px 黑体;
    width:150px;
    height:120px;
    background:red;
    float:left;
}
.div2{
    height:150px;
    background:#ff7300;
    position:absolute;
    top:180px;
    left:200px;
}
.clear{
    background:blue;
}
.div_big{
    position:relative;
    top:50px;
    left:60px;
}
< /style>
< /head>
< body>
  < div class="div_big">
    < div class="div1">第1块< /div>
    < div class="div1 div2">第2块< /div>
     < div class="div1 clear">第3块< /div>
  < /div>
< /body>
< /html>
修改完上面的代码后，在浏览器中运行的效果如图4所示。

图4 绝对定位及相对定位的应用
position还有一种类似的定位方式为固定定位，值为fixed。同样完全脱离文档流，但参照物为浏览器的可见范围。但只工作在IE7.0的strict模式下，这里稍微提下。
（3）static
静态无偏移，不填时默认属性，偏移量属性无效，属于常规文档流。虽然这个参数只有在JavaScript中实现某些效果时使用，但必须理解static定位方式对应的常规文档流概念。
在前面内容中，我们学习并不断涉及到文档流的概念，我们知道，它是页面内容的组织方式，即从上至下，先分行；然后每行根据元素的特点放置元素：块级元素独占一行，行级元素从左至右排列。
这种组织方式就是往容器中放置流体。流体即水、油等液体，特点是自动紧密排列填充容器，就好像往水缸倒水。而非流体则是无此特点，如屋子里摆放各类家具。
常规文档流中的“常规”，是指除浮动和绝对定位外，网页显示元素的默认组织方式。相对于浮动与绝对定位的特殊情况，常规文档流可以简单的描述为“原来位置”。
上面我们讲解了定位属性中的三种定位方式，其中相对定位与绝对定位，会与原文档流形成堆叠，覆盖在其他重叠位置元素的上面。那么：
（1）为什么相对或绝对定位元素会位于常规文档流前面呢？
（2）当有多个相对或绝对定位元素存在时，他们又应该如何排列顺序？
要回答这些问题，必须理解并掌握叠放层次z-index属性。
二、叠放层次属性z-index
z-index属性只对非默认定位方式的元素（相对、绝对与固定定位）有效，默认值为1，其值为正整数。值越大，叠放在越前面。其语法格式如：“z-index:2”。在绝对定位效果图的例子中新增1个绝对定位的div，并设置第2块叠放层次为“z-index:2”，修改后的代码如下所示。
< html>
< head>
< title>相对定位< /title>
< style type="text/css">
div{
    color:#fff;
    font:bold 22px 黑体;
    width:150px;
    height:120px;
    background:red;
    float:left;
}
.div2{
    height:150px;
    background:#ff7300;
    position:relative;
    top:10px;
    left:20px;
    z-index:2;
}
.clear{
    background:blue;
}
.div4{
    position:absolute;
    top:100px;left:100px;
    background:green;
}
< /style>
< /head>
< body>
< div>第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块其次，最底下是未设置绝对定位的文档流。第4块并未设置z-index的值，但绝对定位的元素，其z-index默认值为1。我们再把上面代码略修改，把第2块的“z-index:2”属性去掉。那么，它的z-index值应该也是默认值1，这时就出现1个问题，同层次如何确定叠放顺序呢？在浏览器中运行修改后的代码，效果如图6所示。

图6 叠放层次后来者居上
从图6中我们很容易得出答案，同层间，按代码中出现顺序排，后出现的居上。
因为叠放层次值，也可以理解为2在正常顺序中位于1后面，因此，可以很简单的把这些叠放层次的组织顺序总结为“后来者居上”：
（1）叠放层次值有大小差异，大的居上。就像建房子，地基即文档流页面。楼层数越大则在越上面。
（2）同层间，后出现的居上。
三、实例演示
学习完定位属性，特别是绝对定位及叠放层次z-index属性后，就可以实现页面中常用到的带关闭按钮的对联广告效果，具体效果如图7所示。

图7 带关闭按钮的对联广告
要实现上述效果，其实比较简单：
1）在页面中放置4个元素并设置为绝对定位
2）设置关闭图片的叠放层次为“z-index:2;”
3）根据效果图，确定：
①左边图的左边界“left:40px;”
②右边图的右边界“left:40px;”
③统一上边界，“top:30px;”。
理清思路后，实现上述效果的代码如下所示。
< html>
< head>
< title>带关闭按钮的对联广告< /title>
< style tylie="text/css">
body{
    margin:0px;
    padding:0px;
}
#advLeft,#advRight,#closeLeft,#closeRight{
    position:absolute;
    top:30px;
}
#advRight,#closeRight{
    right:40px;
}
#advLeft,#closeLeft{
    left:40px;
}
#closeLeft,#closeRight{
    z-index:2;
}
< /style>
< /head>
< body>
< div id="closeLeft">< img src="images/close.gif" alt="alt" />< /div>
< div id="closeRight">< img src="images/close.gif" alt="alt" />< /div>
< div id="advLeft">< img src="images/ad1.jpg" alt="alt" />< /div>
< div id="advRight">< img src="images/ad2.jpg" alt="alt" />< /div>
< /body>
< /html>
学习完上述内容，可以总结出各种定位方式的使用场合：
（1）绝对定位，对联广告及悬停显示等ajax效果。用于在有限页面空间中实现多元素叠放。
（2）相对定位，一般用于为绝对定位的上级元素，为绝对定位元素提供参照物。

10