预览加载中，请您耐心等待几秒...

相对定位与绝对定位.docx

预览
1/9
2/9
3/9
4/9
5/9
6/9
7/9
8/9
9/9

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS定位与定位应用 定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时候就需要设置绝对定位，来实现如图1所示的效果。 图1对联广告 一、position的三种定位方式 图1演示了绝对定位的应用，position定位属性主要包含relative相对定位、absolute绝对定位和static默认定位三种定位方式，下面分别对这三种定位方式进行讲解。（1）relative相对定位，相对于文档流原来位置的偏移，原占位大小完整保留。相对定位常用的属性、值及其含义如下表所示。 定位属性属性值说明定位方式positionposition:relative;采用相对定位，相对于本来位置的偏移偏移量leftleft:20px;距离参照物左侧20pxrightright:50px;距离参照物右侧50pxtoptop:10px;距离参照物顶部10px，相对定位参照物为元素的本来位置bottombottom: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><styletype="text/css">div{color:#fff;font:bold22px黑体;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><divclass="div2">第2块</div><divclass="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><styletype="tex