logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

请教CSS中的position:relative;的作用。...

 静谧之家 2010-11-12

请教CSS中的position:relative;的作用。

悬赏：40 发布时间：2008-10-29 提问人：qichunren (架构师)

对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？

对于position的其它几个属性，我都搞懂了
引用

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性


对于文档中所说的几个属性，除了relative，其它的一试，就效果出来了，对于个relative，真是难理解。

要说是相对定位嘛，也不是。

对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。
我理解得没有错吧?

不过在现实开发中，我却常常 得不到预期的效果。我觉得应该是我对这个属性还没有理解透。现在我想完全掌握这个，就像position:absolute那样地掌握它，想怎么弄html元素就怎么弄HTML元素。
请理解这一点的朋友们给讲讲，或者给点资料，链接之类 的也可以。

谢谢您们。
问题补充：
谢谢您 提供的链接，不过它没有深度，我希望得到position:relative的详细的理解。
问题补充：
reeze，你说的这一点很好。
不过，对于声明了这属性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。
问题补充：
就没有大大给点根本的解释吗？

采纳的答案

2008-11-02 ice-cream (初级程序员)

"对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。
我理解得没有错吧? "

首先对你疑惑的地方，我先解答一下：
position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

写了个例子如下：

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2.   
  3. <html xmlns="http://www./1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  6. <title>position</title>  
  7. <style type="text/css">  
  8.     <!--   
  9.     body{   
  10.         font-size:12px;   
  11.         margin:0 auto;   
  12.     }   
  13.   
  14.     div#demo{   
  15.         position:relative;   
  16.         border:1px solid #000;   
  17.         margin:50px;   
  18.         top:-50px;   
  19.         line-height:18px;   
  20.         overflow:hidden;   
  21.         clear:both;   
  22.         height:1%;   
  23.     }   
  24.   
  25.     div#sub{   
  26.         position:absolute;   
  27.         right:10px;   
  28.         top:10px;   
  29.     }   
  30.   
  31.     div.relative{   
  32.         position:relative;   
  33.         left:400px;   
  34.         top:-20px;   
  35.     }   
  36.   
  37.     div.static,div.fixed,div.absolute,div.relative{   
  38.         width:300px;       
  39.     }   
  40.   
  41.     div.static{   
  42.         background-color:#bbb;   
  43.         position:static;   
  44.     }   
  45.   
  46.     div.fixed{   
  47.         background-color:#ffc0cb;   
  48.     }   
  49.   
  50.     div.absolute{   
  51.         background-color:#b0c4de;   
  52.     }   
  53.   
  54.     div.relative{   
  55.         background-color:#ffe4e1;   
  56.     }   
  57.     -->  
  58. </style>  
  59. </head>  
  60. <body>  
  61.     <div id="demo">  
  62.         <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>  
  63.         <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>  
  64.         <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>  
  65.         <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>  
  66.     </div>  
  67. </body>  
  68. </html>  




提问者对于答案的评价：
感觉你的理解不错，谢谢。
也谢谢其他的JEer。

问题答案可能在这里 → 寻找更多解答

其他回答

我也是新手，给您点资料看看，不知道能不能帮上你

http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative

http://www.w3school.com.cn/css/css_positioning.asp
hcq989 (初级程序员) 2008-10-29
我的理解是这样子的。

如果你声明一个div的position：relative的话，就表示它的子内容如果 Position:absolute;的话，他的绝对位置就是相对他最近上一级声明了postion:relative的对象来绝对定位。否则的话就会使相对整个页面来绝对定位的。

声明relative就是说你如果要绝对定位就相对我来绝对定位吧。
reeze (初级程序员) 2008-10-30
引用
不过，对于声明了这属性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。

应该是这样的，他自身的top，left。。。 将会从原来的位置偏移出去，偏移的位置就是相对于它自己原来在流里面的位置。但是其他的属性，比如margin不会随着偏移而偏移吧。。
reeze (初级程序员) 2008-10-30
看一下这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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;}
#apDiv1 {
position:absolute;
left:306px;
top:67px;
width:135px;
height:106px;
z-index:1;
background-color: #999999;
}
-->
</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</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>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/13256.htm
hcq989 (初级程序员) 2008-10-31
我谈谈我的理解:
1.首先不要用层叠这个词，容易把关系搞混
2.absolute是受parentNode的position影响的
  parentNode的position不是relative,那absolute的绝对对象是针对body的
  parentNode的position  是relative,那absolute的绝对对象是针对parentNode的
  也就是说absolute的绝对是有参照Node的
3.对于复杂的position关系，要从parentNode的position的设置逐次的推下来
4.relative的node的尺寸会影响parentNode的尺寸,也就是说relative即定位也占位
  absolute的node的尺寸不影响parentNode的尺寸,也就是说absolute只定位不占位
5.z-index只对absolute的node有效
achun (高级程序员) 2008-11-02
relative是相对定位。这里的相对是指相对于此元素在正常情况下在文档中的位置，而且它并未被抽离文档流。未被抽离的意思是它还对后面的元素有影响，如果被抽离了，就不会对后面的元素有影响了。话多无用，亲自动手试试就理解了。对比一下相对定位前后的位置偏移量，及相对定位时与绝对定位时后面元素的变化。
落魄轻狂 (初级程序员) 2008-11-05
一下内容摘选于:http://www./tech/web/2007/4601.asp 有时间自己去详细看看,详细你会明白的.
1．定位的专业解释
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2．定位的形象解释
自私的相对定位（relative）
相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

实例强化对定位属性的理解
相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。
Xml代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相对定位对象会占据原有位置</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #3CF;   
  17.  height: 200px;   
  18.  width: 200px;   
  19. }   
  20. .box2 {   
  21.  background-color: #6C6;   
  22.  height: 100px;   
  23.  width: 100px;   
  24.  position: relative;   
  25.  float: left;   
  26.  top:-120px;   
  27. }   
  28. -->  
  29. </style>  
  30. </head>  
  31.   
  32. <body>  
  33. <div class="box1">  
  34.   <div class="box2"></div>  
  35. [相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。</div>  
  36. </body>  
  37. </html>  


相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，如果可以就意味着两个人共享一块地方了。在下面的实例中，两个小盒子都刚好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方还是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，如果不设定，即使有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。
Xml代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相对定位对象不可层叠</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #33CCFF;   
  17.  height: 200px;   
  18.  width: 210px;   
  19.  padding:5px;   
  20. }   
  21. .box2 {   
  22.  background-color: #66CC66;   
  23.  height: 100px;   
  24.  width: 100px;   
  25.  position: relative;   
  26.  float: left;   
  27.  left:100px;   
  28. }   
  29. .box3 {   
  30.  background-color: #CC99FF;   
  31.  height: 100px;   
  32.  width: 100px;   
  33.  position: relative;   
  34.  float: left;   
  35.  right:100px;   
  36. }   
  37. -->  
  38. </style>  
  39. </head>  
  40.   
  41. <body>  
  42. <div class="box1">  
  43.   <div class="box2">我家在左边</div>  
  44.   <div class="box3">我家在右边</div>  
  45.   相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局， 如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。   
  46. </div>  
  47. </body>  
  48. </html>  


给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。

Xml代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>给包含块一个高度</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #33CCFF;   
  17.  width: 200px;   
  18.         height: 200px;/*如果不设定这个高度，也许显示的结果并不是你想要的*/   
  19.     
  20. }   
  21. .box2 {   
  22.  background-color: #CC99FF;   
  23.  height: 100px;   
  24.  width: 100px;   
  25.  position:relative;   
  26.  bottom:-100px;   
  27. }   
  28. -->  
  29. </style>  
  30. </head>  
  31.   
  32. <body>  
  33. <div class="box1">  
  34.   <div class="box2"></div>  
  35. </div>  
  36. </body>  
  37. </html>  

放置相对定位对像到可视区外不会出现滚动条。此现象很好理解，因为相对定位对象原来位置没有变，原来位置没有出去滚动条就不会出现。在下面实例中，如果你缩小浏览器窗口，相对定位的对象还会出现完全消失的情况呢。
Xml代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>放置相对定位对像到可视区外不会出现滚动条</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:13pt;   
  12. }   
  13. .box{   
  14.  background-color: #996699;   
  15.  height: 200px;   
  16.  width: 270px;   
  17.  background-image: url(http://farm1.static./48/172522117_410a1e87c1_m.jpg);   
  18.  background-repeat: no-repeat;   
  19.  background-position: center center;   
  20.  position: relative;   
  21.  left: 900px;   
  22. }   
  23. .box2{   
  24.  height: 200px;   
  25.  width: 270px;   
  26.  position:absolute;   
  27.  border: 1px dashed #996699;   
  28. }   
  29. -->  
  30. </style>  
  31. </head>  
  32.   
  33. <body>  
  34. <div class="box2">虚线框是右边盒子原来的位置，即用了相对定位后，把对象重新定位到了右边，但对象的位置其实还在这里，或者说对象实际上并没有越出浏览器可视区域，所以不会出现滚动条。<br />  
  35. 我说过相对定位的的盒子原有位置是不会被占用的，但我为什么可以在这里写说明呢，这是因为我用了绝对定位，我只是为了方便说明才这样做的，请不要误解了。</div>  
  36. <div class="box"></div>  
  37. </body>  
  38. </html>  


定位的特殊值情况。如果定位设置是这样的：position:relative ，right:200px， left:10px会出现什么情况呢？一边叫对象向右偏移10px，另一边又叫对象向左偏移200px，到底是听那边的呢，还是那个先，那个后呢。针对这种矛盾情况，CSS规定只听左边的left，而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话，就以top为准，所以在下面的实例中，你如何改变right的值，对象位置不会发生改变的。
Xml代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>定位的特殊值情况</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #33CCFF;   
  17.  width: 200px;   
  18.  height: 200px;   
  19. }   
  20. .box2 {   
  21.  background-color: #CC99FF;   
  22.  height: 100px;   
  23.  width: 100px;   
  24.  position:relative;   
  25.  right:200px;/*此值总被认为是-left=-10px,所以你怎么改它都不会影响到布局*/   
  26.  left:10px;/*这里设定了两个定位值，但是它们是矛盾的，所以此时将以左边为准，如果是上下类型错误，则以上边定位数值为准*/   
  27.   
  28. }   
  29. -->  
  30. </style>  
  31. </head>  
  32.   
  33. <body>  
  34. <div class="box1">  
  35.   <div class="box2"></div>  
  36. </div>  
  37. </body>  
  38. </html>  


综合实例见证定位的魅力
Xml代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相对定位和绝对定位实例--作者：唐国辉</title>  
  6. <style type="text/css">  
  7. <!--   
  8. *{   
  9.  margin:0px;   
  10.  padding:0px;   
  11. }   
  12. body {   
  13.  margin:10px;   
  14.  font-size: 13px;   
  15. }   
  16. a:link {   
  17.  color: #666;   
  18.  text-decoration: none;/*去除链接下划线*/   
  19. }   
  20. a:visited {   
  21.  color: #666;   
  22.  text-decoration: none;   
  23. }   
  24. a:hover {   
  25.  color: #F90;   
  26. }   
  27. h3 {   
  28.  color: #FFF;   
  29.  background-color: #F90;   
  30.  width: 100px;   
  31.  padding-top:3px;   
  32.  text-align:center;   
  33. }   
  34. ul {   
  35.  width: 300px;   
  36.  border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/   
  37. }   
  38. ul li {   
  39.  padding:5px;   
  40.  border-bottom: 1px solid #CCC;   
  41.  list-style:none;/*去除列表样式，这对于标准浏览很重要*/   
  42. }   
  43. a {   
  44.  position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/   
  45.  display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/   
  46. }   
  47. a div {   
  48.  display: none;/*初始化信息面板不显示*/   
  49. }   
  50. a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/   
  51. a:hover div {   
  52.  position: absolute;   
  53.  padding:5px;   
  54.  display:block;   
  55.  width: 245px;/*只给出宽度，高让它随内容多少自动调整*/   
  56.  left:150px;/*这是相对父级A的定位*/   
  57.  top: 20px;   
  58.  border: 1px solid rgb(91,185,233);   
  59.  background-color: rgb(228,246,255);   
  60.  z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/   
  61. }   
  62. a img {   
  63.  width:80px;   
  64.  height:80px;   
  65.  border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/   
  66.  display:block;   
  67.  position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/   
  68.  top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/   
  69.  left:5px;   
  70. }   
  71. dl {   
  72.  width: 160px;   
  73.  float:right;   
  74.  color: #999;   
  75.  line-height:20px;   
  76. }   
  77. dl dd span {   
  78.  font-weight: bold;   
  79.  color: #639;   
  80. }   
  81. -->  
  82. </style>  
  83. </head>  
  84.   
  85. <body>  
  86. <h3>最新单曲</h3>  
  87. <ul>  
  88.   
  89. <li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />  
  90. <dl>  
  91.  <dd><span>歌名:</span>爱的文身</dd>  
  92.  <dd><span>歌手:</span>黄圣依</dd>  
  93.  <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>  
  94. </dl></div></a></li>  
  95.   
  96. <li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />  
  97. <dl>  
  98.  <dd><span>歌名:</span>累了</dd>  
  99.  <dd><span>歌手:</span>阿信</dd>  
  100.  <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>  
  101. </dl></div></a></li>  
  102.   
  103. <li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />  
  104. <dl>  
  105.  <dd><span>歌名:</span>漫漫 慢慢</dd>  
  106.  <dd><span>歌手:</span>阿朵</dd>  
  107.  <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>  
  108. </dl></div></a></li>  
  109.   
  110. <li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />  
  111. <dl>  
  112.  <dd><span>歌名:</span>我怀念的</dd>  
  113.  <dd><span>歌手:</span>孙燕姿</dd>  
  114.  <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>  
  115. </dl></div></a></li>  
  116.   
  117. <li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />  
  118. <dl>  
  119.  <dd><span>歌名:</span>花期越来越近</dd>  
  120.  <dd><span>歌手:</span>后弦</dd>  
  121.  <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>  
  122. </dl></div></a></li>  
  123.   
  124. </ul>  
  125. </body>  
  126. </html>  
icess (初级程序员) 2008-11-05
从应用的角度来说，relative常用于包含有absolute元素的容器元素上。
absolute元素默认以body做为容器元素进行绝对定位。
如果你想在页面一个特定区域进行绝对定位，就可以在absolute元素外包裹一层容器元素应用relative样式。
jnoee (初级程序员) 2008-11-05
相对定位有两个作用：
1、在保证元素原始占位不变的情况下，偏移元素，这个有很多地方用得到，比如微调元素的位置，还有就是有种居中的实现方式就是利用了这一点；
2、作为子元素的定位父元素，也就是说，如果某个元素相对定位了，那其下的子孙元素，在没有其他定位元素隔离的情况下，将以这个父元素的包围框为基准做绝对定位。
笨笨狗 (初级程序员) 2008-11-05
Html代码 复制代码
  1. <html>  
  2. <head>  
  3. <title> position </title>  
  4. <style>  
  5. body { margin: 0px; padding: 0px; color: white; text-align: right; }   
  6. .box { width: 50px; border: dotted yellow; }   
  7. .square { width: 100px; height: 100px; }   
  8. .r { background-color: red; }   
  9. .g { background-color: green; }   
  10. .b { background-color: blue; }   
  11. #l { float: left; }   
  12. #r { float: right; }   
  13. #abs { position: absolute; top: 150px; left: 50px; }   
  14. #rel { position: relative; top: 150px; left: -50px; }   
  15. </style>  
  16. </head>  
  17.   
  18. <body>  
  19. <div class="box" id="l">  
  20.     <div class="r square" id="abs">R</div>  
  21.     <div class="g square"">G</div>  
  22.     <div class="b square">B</div>  
  23. </div>  
  24. <div class="box" id="r">  
  25.     <div class="r square" id="rel">R</div>  
  26.     <div class="g square">G</div>  
  27.     <div class="b square">B</div>  
  28. </div>  
  29. </body>  
  30. </html>  

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 静谧之家 > 《私人材料》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多