4.4CSS高级全解.ppt

Web标准网页设计与PHP 唐四薪 编著 清华大学出版社 4.7 相对定位和绝对定位 内容提要 定位属性position及其取值 相对定位 相对定位的应用 偏移的导航条 网页居中的相对定位法 绝对定位 绝对定位的应用 缺角的导航条 小提示窗口 下拉菜单 定位属性position的取值 为了让元素在定位属性下定位，需要对元素设置定位属性position position的取值有四种，即relative、absolute、fixed和static。 定位属性的取值中用得最多的是相对定位（relative）和绝对定位（absolute） 偏移属性 偏移属性是指 top、left、bottom、right四个属性，它们的取值可以为像素，也可以是百分比 #mydiv { position:absolute; left: 50%； top: 30px; } 偏移属性仅对设置了定位属性的元素有效 4.7.2相对定位 相对定位 使用相对定位的元素的位置常以标准流的定位方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 如果对一个元素设置相对定位属性（position: relative;），那么它将保持在原来的位置上不动。如果再对它通过top、left等属性值设置垂直或水平偏移量，那么它将“相对于”它原来的位置发生移动。 相对定位举例 #mybox { position: relative; left: 20px; top: 20px; } 相对定位的特点 元素原来占据的位置仍然会保留，也就是说相对定位的元素未脱离标准流； 因为是使用了定位属性的元素，所以可能和其他元素发生重叠。 相对定位的作用 设置元素为相对定位的用途： 一是让元素相对于原来的位置发生位移，同时不释放它原来占据的位置； 二是让元素的子元素以它为定位基准进行定位，同时它的位置保持不变，这时相对定位的元素成为包含框，一般是为了帮助里面的元素进行绝对定位。 相对定位的应用 1 鼠标滑过时向左下偏移的链接 a:hover { color: #ff0000; position: relative; right: 2px; top: 3px; } 2 利用相对定位制作简单的阴影效果 原理是在img元素外套一个外围容器，将外围容器的背景设置为灰色，作为img元素的阴影，同时不设置填充边界等值使外围容器和图片一样大，这时图像就正好把外围容器的背景完全覆盖。 再设置图像相对于原来的位置往左上方偏移几个像素，这样图像的右下方就露出了阴影盒子右边和下边部分的背景，看起来就是img元素的阴影了 相对定位制作简单的阴影效果 img { padding: 6px; border: 1px solid #465B68; background-color: #fff; position: relative; left: -5px; top: -5px; } div.shadow { background-color: #CCCCCC; float:left; } div class=shadowimg src=works.jpg width=150 height=140 //div 3 网页布局的相对定位水平居中法 设置wrap的定位是相对于它原来的位置，而它原来默认的位置是在浏览器窗口中左对齐，然后将其左边框移动到浏览器的正中央，这是通过left:50%实现的，这样就找到了浏览器的中线，再使用负边界法将盒子的一半宽度从中线位置拉回到左边，这样就实现了水平居中。 想一想：如果把#container选择器中（left:50%; margin-left:-380px;）改为（right:50%; margin-right: -380px;），还能实现居中吗？ 4.7.4绝对定位 绝对定位 绝对定位，盒子的位置以它的包含框为基准进行定位。绝对定位的元素从标准流中脱离。 注意：绝对定位是以他的包含框的边框内侧为基准进行定位，因此改变包含框的填充值不会对绝对定位元素的位置造成影响。 绝对定位的偏移值是指从它的包含框边框内侧到元素的外边界之间的距离，如果修改元素的margin值会影响元素内容的显示位置。如果不设置绝对定位元素的偏移值，那么它位于未设置绝对定位属性时在标准流中的初始位置 1. 绝对定位－不设置包含框 em { background-color: #0099FF; position:absolute; left: 60px； top: 30px; } 2. 绝对定位－设置包含框 但要注意的是，设置为绝对定位（position:absolute;）的元素，并非总是以