《相对定位与绝对定位》由会员分享，可在线阅读，更多相关《相对定位与绝对定位（10页珍藏版）》请在金锄头文库上搜索。
1、1CSSCSS 定位与定位应用定位与定位应用定位一直是 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 值等于-r
3、ight，同样的，top 值等于-bottom，例如：“left:10px;”等价于“right:-10px;”。我们根据上表中对 relative 知识的描述，来看图 2 中相对定位元素“第 2 块”的特点。2图 2 相对定位在图 2 中，第 2 块内容本应该在虚线范围内，但是它却移动了位置，主要是在图 2 页面的第 2 块中加入“position:relative;top:10px;left:20px;”代码，第 2 块实现了相对定位，并且左、上都有一定的偏移量，所以就呈现了如图2 所示的效果。图 2 页面的关键代码如下所示：相对定位divcolor:#fff;font:bold 22px
4、 黑体;width:150px;height:120px;background:red;float:left;.div2height:150px;background:#ff7300;position:relative;top:10px;left:20px; .clearbackground:blue;第 1 块第 2 块第 3 块3从上面的代码中可以知道，相对定位有如下 3 个特点：参照物：相对定位是相对于未设置定位方式前的位置，其参照物就是原来位置。偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。占位：相对定位偏移后的元素，其占有的位置是原来位置，其偏移后会覆盖并位于其他重叠
5、元素（如“第 3 块”）的上面，但不会增加高度和宽度。（2）absolute绝对定位，完全脱离文档流，是相对于第一个非默认定位方式的上级元素的距离。相对定位的元素大小会在文档流原来位置占去相同大小的页面空间。而绝对定位则不再占原文档流页面的任何空间。其常用属性语法语义与相对定位类似，例如“position:absolute;top:200px;left:150px;”。定位方式的区别导致了参照物区别。具体参照物为上级元素中，第一个存在非默认定位方式的元素，它完全脱离了文档流。下面图 2 页面中的代码进行修改，只修改样式.div2，修改为绝对定位，为方便参照，加大了偏移量，其他代码均没有任何变化
6、，.div2 修改后的代码如下所示。 .div2height:150px;background:#ff7300;position:absolute;top:180px;left:200px; 修改后在浏览器中运行的效果如图 3 所示，第 2 块风格改为绝对定位后，位置也发生了变化，并且不再占有原来的位置。图 3 绝对定位4学习完绝对定位，可以发现绝对定位也有 3 个特点：参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠元素（如“第
7、3 块”）的上面。现在为三个 div 增加一个上级 div，并且设置上级 div 的相对定位为 relative，上外边距设置 50px，左边距设置为 60px，修改后的页面代码如下所示。 绝对定位.div1color:#fff;font:bold 22px 黑体;width:150px;height:120px;background:red;float:left;.div2height:150px;background:#ff7300;position:absolute;top:180px;left:200px; .clearbackground:blue;.div_bigposition:
8、relative;top:50px;left:60px;第 1 块第 2 块第 3 块修改完上面的代码后，在浏览器中运行的效果如图 4 所示。 5图 4 绝对定位及相对定位的应用position 还有一种类似的定位方式为固定定位，值为 fixed。同样完全脱离文档流，但参照物为浏览器的可见范围。但只工作在IE7.0 的 strict 模式下，这里稍微提下。（3）static静态无偏移，不填时默认属性，偏移量属性无效，属于常规文档流。虽然这个参数只有在 JavaScript 中实现某些效果时使用，但必须理解 static 定位方式对应的常规文档流概念。在前面内容中，我们学习并不断涉及到文档流的概
9、念，我们知道，它是页面内容的组织方式，即从上至下，先分行；然后每行根据元素的特点放置元素：块级元素独占一行，行级元素从左至右排列。这种组织方式就是往容器中放置流体。流体即水、油等液体，特点是自动紧密排列填充容器，就好像往水缸倒水。而非流体则是无此特点，如屋子里摆放各类家具。常规文档流中的“常规”，是指除浮动和绝对定位外，网页显示元素的默认组织方式。相对于浮动与绝对定位的特殊情况，常规文档流可以简单的描述为“原来位置”。上面我们讲解了定位属性中的三种定位方式，其中相对定位与绝对定位，会与原文档流形成堆叠，覆盖在其他重叠位置元素的上面。那么：（1）为什么相对或绝对定位元素会位于常规文档流前面呢？（
10、2）当有多个相对或绝对定位元素存在时，他们又应该如何排列顺序？要回答这些问题，必须理解并掌握叠放层次 z-index 属性。二、叠放层次属性 z-index6z-index 属性只对非默认定位方式的元素（相对、绝对与固定定位）有效，默认值为 1，其值为正整数。值越大，叠放在越前面。其语法格式如：“z-index:2”。在绝对定位效果图的例子中新增 1 个绝对定位的 div，并设置第 2 块叠放层次为“z-index:2”，修改后的代码如下所示。 相对定位divcolor:#fff;font:bold 22px 黑体;width:150px;height:120px;background:red
11、;float:left;.div2height:150px;background:#ff7300;position:relative;top:10px;left:20px;z-index:2; .clearbackground:blue;.div4position:absolute;top:100px;left:100px;background:green;第 1 块第 2 块第 3 块第 4 块(未设置 z-index)在浏览器中运行上面的代码，效果如图 5 所示。 7图 5 叠放层次的应用在图 5 中，可以很明显的看到，叠放属性是“z-index:2”的第 2 块位于最上面，第 4 块其次
12、，最底下是未设置绝对定位的文档流。第 4 块并未设置 z-index 的值，但绝对定位的元素，其 z-index 默认值为 1。我们再把上面代码略修改，把第 2 块的“z-index:2”属性去掉。那么，它的 z-index 值应该也是默认值 1，这时就出现 1 个问题，同层次如何确定叠放顺序呢？在浏览器中运行修改后的代码，效果如图 6 所示。 8图 6 叠放层次后来者居上从图 6 中我们很容易得出答案，同层间，按代码中出现顺序排，后出现的居上。因为叠放层次值，也可以理解为 2 在正常顺序中位于 1 后面，因此，可以很简单的把这些叠放层次的组织顺序总结为“后来者居上”：（1）叠放层次值有大小差
13、异，大的居上。就像建房子，地基即文档流页面。楼层数越大则在越上面。（2）同层间，后出现的居上。三、实例演示学习完定位属性，特别是绝对定位及叠放层次 z-index 属性后，就可以实现页面中常用到的带关闭按钮的对联广告效果，具体效果如图 7 所示。 9图 7 带关闭按钮的对联广告要实现上述效果，其实比较简单：1）在页面中放置 4 个元素并设置为绝对定位2）设置关闭图片的叠放层次为“z-index:2;”3）根据效果图，确定：左边图的左边界“left:40px;”右边图的右边界“left:40px;”统一上边界，“top:30px;”。理清思路后，实现上述效果的代码如下所示。带关闭按钮的对联广告bodymargin:0px;padding:0px;#advLeft,#advRight,#closeLeft,#closeRightposition:absolute;top:30px;#advRight,#closeRightright:40px;#advLeft,#closeLeftleft:40px;#closeLeft,#closeRightz-index:2;10学习完上述内容，可以总结出各种定位方式的使用场合：（1）绝对定位，对联广告及悬停显示等 ajax 效果。用于在有限页面空间中实现多元素叠放。（2）相对定位，一般用于为绝对定位的上级元素，为绝对定位元素提供参照物。
