还剩8页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
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页面的关键代码如下所示htmlheadtitle相对定位/titlestyletype=text/cssdiv{ 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/headbodydiv第1块/divdivclass=div2第2块/divdivclass=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,修改后的页面代码如下所示htmlheadtitle绝对定位/titlestyletype=text/css.div1{ color:#fff; font:bold22px黑体; 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/headbody divclass=div_big divclass=div1第1块/div divclass=div1div2第2块/div divclass=div1clear第3块/div /div/body/html修改完上面的代码后,在浏览器中运行的效果如图4所示图4绝对定位及相对定位的应用position还有一种类似的定位方式为固定定位,值为fixed同样完全脱离文档流,但参照物为浏览器的可见范围但只工作在IE
7.0的strict模式下,这里稍微提下
(3)static静态无偏移,不填时默认属性,偏移量属性无效,属于常规文档流虽然这个参数只有在J__aScript中实现某些效果时使用,但必须理解static定位方式对应的常规文档流概念在前面内容中,我们学习并不断涉及到文档流的概念,我们知道,它是页面内容的__方式,即从上至下,先分行;然后每行根据元素的特点放置元素块级元素独占一行,行级元素从左至右排列这种__方式就是往容器中放置流体流体即水、油等液体,特点是自动紧密排列填充容器,就好像往水缸倒水而非流体则是无此特点,如屋子里摆放各类家具常规文档流中的“常规”,是指除浮动和绝对定位外,网页显示元素的默认__方式相对于浮动与绝对定位的特殊情况,常规文档流可以简单的描述为“原来位置”上面我们讲解了定位属性中的三种定位方式,其中相对定位与绝对定位,会与原文档流形成堆叠,覆盖在其他重叠位置元素的上面那么
(1)___相对或绝对定位元素会位于常规文档流前面呢?
(2)当有多个相对或绝对定位元素存在时,他们又应该如何排列顺序?要回答这些问题,必须理解并掌握叠放层次z-index属性
二、叠放层次属性z-indexz-index属性只对非默认定位方式的元素(相对、绝对与固定定位)有效,默认值为1,其值为正整数值越大,叠放在越前面其语法格式如“z-index:2”在绝对定位效果图的例子中新增1个绝对定位的div,并设置第2块叠放层次为“z-index:2”,修改后的代码如下所示htmlheadtitle相对定位/titlestyletype=text/cssdiv{ color:#fff; font:bold22px黑体; 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/headbodydiv第1块/divdivclass=div2第2块/divdivclass=clear第3块/divdivclass=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;”理清思路后,实现上述效果的代码如下所示htmlheadtitle带关闭按钮的对联__/titlestyletylie=text/cssbody{ __rgin: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/headbodydivid=closeLeftimgsrc=i__ges/close.gifalt=alt//divdivid=closeRightimgsrc=i__ges/close.gifalt=alt//divdivid=advLeftimgsrc=i__ges/ad
1.jpgalt=alt//divdivid=advRightimgsrc=i__ges/ad
2.jpgalt=alt//div/body/html学习完上述内容,可以总结出各种定位方式的使用场合
(1)绝对定位,对联__及悬停显示等ajax效果用于在有限页面空间中实现多元素叠放
(2)相对定位,一般用于为绝对定位的上级元素,为绝对定位元素提供参照物PAGE2。