Div + CSS：absolute与relative的运用

日期：2007年12月11日作者：查看:[大字体中字体小字体]

　　Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。　详细讲解两者的关系，需要配合例子，请先看例子：

以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">

</style></head>
<body>
<div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　right: 20px;<br />
　<div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
left: 20px;<br />
bottom: 10px;<br />
</div>
</div>
<div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　left: 5px;<br />
</div>
<div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;">
　position: relative;<br />
　left: 150px;<br />
　<br />
　width: 300px; height: 50px; <br />
</div>
<div style="text-align:center; background:#ccc;">
　　<div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;">
　 <p>1</p>
　 <p>2</p>
　 <p>3</p>
　 <p>4</p>
　 <p>5</p>
　 <div style="padding:20px 0 0 20px; background:#FFFF00;">
　　　 padding: 20px 0 0 20px;
　　<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div>
　　<div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;">
　　　　position: <span style="color:blue;">relative</span>;<br />
　　 left: 200px;<br />
　　 <br />
　　 width: 300px;<br />
　　 height: 300px;<br />
　　 <div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　　 top: 20px;<br />
　　　 right: 20px;<br /></div>
　　 <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　bottom: 20px;<br />
　　left: 20px;<br />
　　</div>
　　</div>
　 </div>
　
</div>
</div>
</body>
</html>

　　absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：

　　1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。

　　2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：

　　(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。

　　(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。

　　relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。

　　通过上面的例子和讲解，相信熟练运用 absolute 与 relative 并不是一件很困难的事，我们周围有不少关于 absolute 与 relative 的好例子，比如“网易163免费邮”首页(http://mail.163.com)，里面就有大量的运用。

　　例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。

（出处：急速软件下载学院）

Div + CSS：absolute与relative的运用相关文章：
·DIV+CSS常见错误汇总
·用CSS让文字居于div的底部
·Div + CSS：absolute与relative的运用
·另一个角度谈谈DIV+CSS
·网页设计并非所有内容都必须要DIV做“容器”
·div+css实现圆角边框
·CSS实现不定高度DIV绝对居中
·DIV与Table两种页面布局方式在大型网站的可用性比较
·解决div列高度自适应的三种最常用的方法
·如何用div占据空间的解决方法
Div + CSS：absolute与relative的运用相关软件
·DivX Create Bundlev6.3
·DivX Play Bundlev6.3
·Dr.DivX v2.00 RC3
·Acala AVI DivX MPEG XviD VOB to PSPv2.2.7
·DivX Player LiteV2.0
·DivxToDVDV1.99.14
·DivXv6.7 Final
·Natalie Choquette 娜塔莉·夏高《Diva Luna 月亮的女儿》320kps
·AVI DivX to DVD SVCD VCD ConverterV3.4.1112 汉化版
·实用！Div+CSS应用实例

上一篇:网络营销网站功能设计的几点心得

下一篇:Javascript代码直接调用计算机中的程序

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

Div + CSS：absolute与relative的运用

精品推荐

热点TOP10

特别推荐