Div CSS 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">
<!--
body,td,th{font-family:Verdana;font-size:9px;}
-->
</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 测试通过。
相关推荐
-
javascript下操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.styl
-
CSS中Float（浮动）相关技巧文章
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的
-
详细分析css float 属性以及position:absolute 的区别
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg"> <div class="box1"> 框框1
-
CSS定位中Positoin、absolute、Relative的一些研究
Positoin属性有四个值: static.fixed.absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义.此时对象不具有边距,但仍有补白和边框.ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置. 但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有
-
css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab
-
css 跨浏览器实现float:center
复制代码 代码如下: <div id="macji"> <ul class="macji-skin"> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul> </div> 我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知).可以设置ul的text-align:center,再设置li的displ
-
javascript css float属性的特殊写法
1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等. 这个规律我想大多数的前
-
解决rs.absolutepage=-1的问题
有时候在做asp的分页程序的时候会遇到无法分页的情况,就试着把rs.absolutepage打印出来结果却一直为-1. 下面介绍一种解决方案: .......省略 rs.cursorlocation=3 '就是加上这行 rs.open sql,conn,3,2 rs.pagesize=10 if not rs.eof then rs.absolutepage=1 end if pagecount=rs.pagesize .........省略
-
javascript css styleFloat和cssFloat
下面是兼容性代码 复制代码 代码如下: LTFunction.setFloatStyle=function(obj,style) { var sty=obj.style; if('cssFloat' in sty){ obj.style.cssFloat=style; }else if('styleFloat' in sty){ obj.style.styleFloat=style; }else{ throw 'set float style:'+style+'error.'; } }
-
relative absolute无法冲破的等级问题解决第1/3页
前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题: 复制代码 代码如下: <ul> <li>第一块</li> <li><span>第二块</span></li> <li>第三块</li> <li>第四块</li> <li>第五块</li> </ul> 如果我我们设定LI为position:r
-
position:relative/absolute无法冲破的等级
注:本文实例在IE5.x下可能会显示不出来,请使用IE6.IE7.Firefox.Opera等浏览器来调试! 前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题: 复制代码 代码如下: <ul> <li>第一块</li> <li><span>第二块</span></li> <li>第三块</li> <li>第四块</li> <