中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
請教CSS中的position:relative;的作用。

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

懸賞：40 發(fā)布時(shí)間：2008-10-29 提問人：qichunren (架構(gòu)師)

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

對于position的其它幾個(gè)屬性，我都搞懂了
引用

static : 　無特殊定位，對象遵循HTML定位規(guī)則
absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。此時(shí)對象不具有邊距，但仍有補(bǔ)白和邊框
relative : 　對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置
fixed : 　IE5.5及NS6尚不支持此屬性


對于文檔中所說的幾個(gè)屬性，除了relative，其它的一試，就效果出來了，對于個(gè)relative，真是難理解。

要說是相對定位嘛，也不是。

對于頁面中一個(gè)static的div#demo，我想讓這個(gè)#demo里的一個(gè)div#sub相對于#demo定位在右上角的某個(gè)地方，應(yīng)該是用這個(gè)position:relative這個(gè)吧，然后再加上top,right給限制一下。
我理解得沒有錯(cuò)吧?

不過在現(xiàn)實(shí)開發(fā)中，我卻常常 得不到預(yù)期的效果。我覺得應(yīng)該是我對這個(gè)屬性還沒有理解透?，F(xiàn)在我想完全掌握這個(gè)，就像position:absolute那樣地掌握它，想怎么弄html元素就怎么弄HTML元素。
請理解這一點(diǎn)的朋友們給講講，或者給點(diǎn)資料，鏈接之類 的也可以。

謝謝您們。
問題補(bǔ)充：
謝謝您 提供的鏈接，不過它沒有深度，我希望得到position:relative的詳細(xì)的理解。
問題補(bǔ)充：
reeze，你說的這一點(diǎn)很好。
不過，對于聲明了這屬性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所講的是relative的子元素的行為啊。我想知道它自身的一些信息。
問題補(bǔ)充：
就沒有大大給點(diǎn)根本的解釋嗎？

采納的答案

2008-11-02 ice-cream (初級程序員)

"對于頁面中一個(gè)static的div#demo，我想讓這個(gè)#demo里的一個(gè)div#sub相對于#demo定位在右上角的某個(gè)地方，應(yīng)該是用這個(gè)position:relative這個(gè)吧，然后再加上top,right給限制一下。
我理解得沒有錯(cuò)吧? "

首先對你疑惑的地方，我先解答一下：
position的默認(rèn)值是static，（也就是說對于任意一個(gè)元素，如果沒有定義它的position屬性，那么它的position:static）

如果你想讓這個(gè)#demo里的一個(gè)div#sub相對于#demo定位在右上角的某個(gè)地方，應(yīng)該給#demo相對定位，#sub絕對定位。

absolute是相對于自己最近的父元素來定位的，如果你不給#demo相對定位，那么#sub的絕對定位就是相對于body來定位的。

relative是相對于自己來定位的，例如：#demo{position:relative;top:-50px;},這時(shí)#demo會(huì)在相對于它原來的位置上移50px。

另：relative 不脫離文檔流，absolute 脫離文檔流。也就是說：relative 的元素盡管表面上看到它偏離了原來的位置，但它實(shí)際上在文檔流中還是沒變。absolute的元素不僅位置改變了，同時(shí)也脫離了文檔流。

寫了個(gè)例子如下：

Html代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/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: 默認(rèn)值。無特殊定位，對象遵循HTML定位規(guī)則 </div>  
  63.         <div id="sub" class="absolute">absolute: 將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對于其最接近的一個(gè)最有定位設(shè)置的父對象進(jìn)行絕對定位。如果不存在這樣的父對象,則依據(jù)body對象。而其層疊通過z-index屬性定義 </div>  
  64.         <div class="fixed">fixed:未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規(guī)范 </div>  
  65.         <div class="relative">relative:對象不可層疊，但將依據(jù) left,right,top,bottom 等屬性在正常文檔流中偏移位置 </div>  
  66.     </div>  
  67. </body>  
  68. </html>  




提問者對于答案的評價(jià)：
感覺你的理解不錯(cuò)，謝謝。
也謝謝其他的JEer。

其他回答

我也是新手，給您點(diǎn)資料看看，不知道能不能幫上你

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
我的理解是這樣子的。

如果你聲明一個(gè)div的position：relative的話，就表示它的子內(nèi)容如果 Position:absolute;的話，他的絕對位置就是相對他最近上一級聲明了postion:relative的對象來絕對定位。否則的話就會(huì)使相對整個(gè)頁面來絕對定位的。

聲明relative就是說你如果要絕對定位就相對我來絕對定位吧。
reeze (初級程序員) 2008-10-30
引用
不過，對于聲明了這屬性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所講的是relative的子元素的行為啊。我想知道它自身的一些信息。

應(yīng)該是這樣的，他自身的top，left。。。 將會(huì)從原來的位置偏移出去，偏移的位置就是相對于它自己原來在流里面的位置。但是其他的屬性，比如margin不會(huì)隨著偏移而偏移吧。。
reeze (初級程序員) 2008-10-30
看一下這個(gè)
<!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;}
#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) 詳細(xì)出處參考：http://www.jb51.net/article/13256.htm
hcq989 (初級程序員) 2008-10-31
我談?wù)勎业睦斫?
1.首先不要用層疊這個(gè)詞，容易把關(guān)系搞混
2.absolute是受parentNode的position影響的
  parentNode的position不是relative,那absolute的絕對對象是針對body的
  parentNode的position  是relative,那absolute的絕對對象是針對parentNode的
  也就是說absolute的絕對是有參照Node的
3.對于復(fù)雜的position關(guān)系，要從parentNode的position的設(shè)置逐次的推下來
4.relative的node的尺寸會(huì)影響parentNode的尺寸,也就是說relative即定位也占位
  absolute的node的尺寸不影響parentNode的尺寸,也就是說absolute只定位不占位
5.z-index只對absolute的node有效
achun (高級程序員) 2008-11-02
relative是相對定位。這里的相對是指相對于此元素在正常情況下在文檔中的位置，而且它并未被抽離文檔流。未被抽離的意思是它還對后面的元素有影響，如果被抽離了，就不會(huì)對后面的元素有影響了。話多無用，親自動(dòng)手試試就理解了。對比一下相對定位前后的位置偏移量，及相對定位時(shí)與絕對定位時(shí)后面元素的變化。
落魄輕狂 (初級程序員) 2008-11-05
一下內(nèi)容摘選于:http://www.blueidea.com/tech/web/2007/4601.asp 有時(shí)間自己去詳細(xì)看看,詳細(xì)你會(huì)明白的.
1．定位的專業(yè)解釋
相對定位（relative）：對象不可層疊，依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設(shè)計(jì)。

2．定位的形象解釋
自私的相對定位（relative）
相對定位一個(gè)最大特點(diǎn)是：自己通過定位跑開了還占用著原來的位置，不會(huì)讓給他周圍的諸如文本流之類的對象。相對定位也比較獨(dú)立，做什么事它自己說了算，要定位的時(shí)候，它是以自己本身所在位置偏移的（相對對象本身偏移）。再拿前邊作比如來解，那么此時(shí)西瓜似乎是有魔法的，如果西瓜通過相對定位在水桶中偏移了你會(huì)看到一個(gè)現(xiàn)實(shí)生活中不存在的現(xiàn)象：水中有一個(gè)地方水凹下去了，周圍的水不能填補(bǔ)它，西瓜看起來在旁邊，如果攪動(dòng)一下桶中的水，那個(gè)凹的位置會(huì)發(fā)現(xiàn)改變（文本流對相對定位對象還存在影響），但是凹處到西瓜出現(xiàn)的距離始終保持一致。可見文本流與它之間還會(huì)互相影響，因?yàn)閷ο蟛]有真正脫離文本流，就像有兩個(gè)人在同一層樓水平移動(dòng)的過程中會(huì)有碰頭的機(jī)會(huì)。

實(shí)例強(qiáng)化對定位屬性的理解
相對定位對象會(huì)占據(jù)它原來位置，在下面實(shí)例中，沒有設(shè)定相對定位前，綠色小盒子是在藍(lán)色盒子左上角的，之前也設(shè)定了綠色小盒子的浮動(dòng)方式為左浮動(dòng)，可以看到文本環(huán)繞在它右邊，但是后來用相對定位方法把綠色小盒子重定位到外面去了，它還占著自己原來位置，因?yàn)槟氵€可以看到文本流沒有發(fā)生自動(dòng)填補(bǔ)流動(dòng)。因此這種直接的相對定位方法較少用，因?yàn)橹囟ㄎ粚ο蠛笤瓉砦恢每樟艘粔K。相對定位常與絕對定位結(jié)合用，一般是給父級設(shè)定相對定位方式，子級元素就可以相對它進(jìn)行方便的絕對定位了（請注意看后面的實(shí)例）。
Xml代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相對定位對象會(huì)占據(jù)原有位置</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. [相對定位對象會(huì)占據(jù)原有位置]現(xiàn)在綠色小盒子是以子盒子形式存在藍(lán)色大盒子中，并設(shè)定了浮動(dòng)方式為左浮動(dòng)，所以這些文字能環(huán)繞在它右邊，當(dāng)綠色小盒子用相對定位方法重定位到外邊去了，文字還是不能流入它的區(qū)域，即左上角空白區(qū)域，那是因?yàn)榫G色盒子還占用著它原來位置。</div>  
  36. </body>  
  37. </html>  


相對定位的對象不可以重疊。這一點(diǎn)也許比較難理解，先來這樣理解吧，因?yàn)橄鄬Χㄎ坏膶ο駴]有脫離文本流，就像兩個(gè)還是住在同一層樓的人，任何時(shí)候，他們腳下踩的地方不可能被另一個(gè)人踩著的，如果可以就意味著兩個(gè)人共享一塊地方了。在下面的實(shí)例中，兩個(gè)小盒子都剛好排在大盒子上方，所以在大盒子中輸入的文字被擠到了下面。上面兩個(gè)盒子我再用相對定位的方法對調(diào)了它們的位置，當(dāng)前它們下方的空間其實(shí)不是自己的，也正因?yàn)樗鼈儧]有重疊，所以盒子上方還是有兩個(gè)盒子占用的空間，下面文字無法向上流動(dòng)（我已對盒子設(shè)定了浮動(dòng)屬性的了，如果不設(shè)定，即使有空間文本也不會(huì)往上流，上面盒子是塊級元素，會(huì)獨(dú)立占據(jù)一行）。
Xml代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/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.   相對定位對象是在正常文本流中移動(dòng)的，所以它的存在還是會(huì)影響文本流的布局， 如果是絕對定位，這些文本應(yīng)向上流入上方兩個(gè)盒子的底部了。   
  46. </div>  
  47. </body>  
  48. </html>  


給包含塊一個(gè)高度，或者說給定位對象的父級設(shè)定一個(gè)高度。不然也許顯示的結(jié)果并不是你想要的。在下面的例子中，如果你本意要實(shí)現(xiàn)下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一塊區(qū)域，如果你刪除了box1的高度會(huì)怎么樣呢？自己測試一下吧。

Xml代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>給包含塊一個(gè)高度</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;/*如果不設(shè)定這個(gè)高度，也許顯示的結(jié)果并不是你想要的*/   
  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>  

放置相對定位對像到可視區(qū)外不會(huì)出現(xiàn)滾動(dòng)條。此現(xiàn)象很好理解，因?yàn)橄鄬Χㄎ粚ο笤瓉砦恢脹]有變，原來位置沒有出去滾動(dòng)條就不會(huì)出現(xiàn)。在下面實(shí)例中，如果你縮小瀏覽器窗口，相對定位的對象還會(huì)出現(xiàn)完全消失的情況呢。
Xml代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>放置相對定位對像到可視區(qū)外不會(huì)出現(xiàn)滾動(dòng)條</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.flickr.com/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">虛線框是右邊盒子原來的位置，即用了相對定位后，把對象重新定位到了右邊，但對象的位置其實(shí)還在這里，或者說對象實(shí)際上并沒有越出瀏覽器可視區(qū)域，所以不會(huì)出現(xiàn)滾動(dòng)條。<br />  
  35. 我說過相對定位的的盒子原有位置是不會(huì)被占用的，但我為什么可以在這里寫說明呢，這是因?yàn)槲矣昧私^對定位，我只是為了方便說明才這樣做的，請不要誤解了。</div>  
  36. <div class="box"></div>  
  37. </body>  
  38. </html>  


定位的特殊值情況。如果定位設(shè)置是這樣的：position:relative ，right:200px， left:10px會(huì)出現(xiàn)什么情況呢？一邊叫對象向右偏移10px，另一邊又叫對象向左偏移200px，到底是聽那邊的呢，還是那個(gè)先，那個(gè)后呢。針對這種矛盾情況，CSS規(guī)定只聽左邊的left，而右邊怎么設(shè)置都被重定為-left,即-left =right。上下值top與bottom矛盾的話，就以top為準(zhǔn)，所以在下面的實(shí)例中，你如何改變r(jià)ight的值，對象位置不會(huì)發(fā)生改變的。
Xml代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/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;/*此值總被認(rèn)為是-left=-10px,所以你怎么改它都不會(huì)影響到布局*/   
  26.  left:10px;/*這里設(shè)定了兩個(gè)定位值，但是它們是矛盾的，所以此時(shí)將以左邊為準(zhǔn)，如果是上下類型錯(cuò)誤，則以上邊定位數(shù)值為準(zhǔn)*/   
  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>  


綜合實(shí)例見證定位的魅力
Xml代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相對定位和絕對定位實(shí)例--作者：唐國輝</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;/*使其上邊有一線條，與標(biāo)題h3吻合*/   
  37. }   
  38. ul li {   
  39.  padding:5px;   
  40.  border-bottom: 1px solid #CCC;   
  41.  list-style:none;/*去除列表樣式，這對于標(biāo)準(zhǔn)瀏覽很重要*/   
  42. }   
  43. a {   
  44.  position: relative;/*設(shè)置其定位方法為相對定位，等一下內(nèi)部信息面板就可以相對它定位*/   
  45.  display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點(diǎn)中鏈接文字就可以響應(yīng)鏈接*/   
  46. }   
  47. a div {   
  48.  display: none;/*初始化信息面板不顯示*/   
  49. }   
  50. a:hover {background:#fff;}/*IE7以下版本A狀態(tài)偽類bug*/   
  51. a:hover div {   
  52.  position: absolute;   
  53.  padding:5px;   
  54.  display:block;   
  55.  width: 245px;/*只給出寬度，高讓它隨內(nèi)容多少自動(dòng)調(diào)整*/   
  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;/*把信息面板提到一個(gè)較高的位置，使鏈接文字過長時(shí)不會(huì)與面板重疊,但這只對FF有效*/   
  61. }   
  62. a img {   
  63.  width:80px;   
  64.  height:80px;   
  65.  border:none;/*去除圖片邊框，默認(rèn)情況下，鏈接內(nèi)的圖片在標(biāo)準(zhǔn)瀏覽器會(huì)出現(xiàn)邊框*/   
  66.  display:block;   
  67.  position: absolute;/*用絕對定位抽離正常文本流，不然在設(shè)計(jì)的時(shí)候考慮到不同瀏覽器正常顯示會(huì)更麻煩*/   
  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>黃圣依唱片主打歌的確是她個(gè)人的內(nèi)心寫照，《愛的文身》由香港音樂大師金培達(dá)作曲，制作人陳少琪親自填詞。</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>阿朵搶聽版最新單曲《漫漫 慢慢》讓你認(rèn)識(shí)阿朵柔情的一面，展現(xiàn)阿朵百變的風(fēng)格。</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>令人感同身受的抒情歌，在故事性的架構(gòu)中，有著平凡但又能扣人心弦的情感，是一首高度共鳴的抒情歌。</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>后弦參與《花開的聲音》這個(gè)舞臺(tái)劇里的一部分，邀請了后弦去演唱這首歌，此歌就是為舞臺(tái)劇《花開的聲音》而創(chuàng)作。</dd>  
  122. </dl></div></a></li>  
  123.   
  124. </ul>  
  125. </body>  
  126. </html>  
icess (初級程序員) 2008-11-05
從應(yīng)用的角度來說，relative常用于包含有absolute元素的容器元素上。
absolute元素默認(rèn)以body做為容器元素進(jìn)行絕對定位。
如果你想在頁面一個(gè)特定區(qū)域進(jìn)行絕對定位，就可以在absolute元素外包裹一層容器元素應(yīng)用relative樣式。
jnoee (初級程序員) 2008-11-05
相對定位有兩個(gè)作用：
1、在保證元素原始占位不變的情況下，偏移元素，這個(gè)有很多地方用得到，比如微調(diào)元素的位置，還有就是有種居中的實(shí)現(xiàn)方式就是利用了這一點(diǎn)；
2、作為子元素的定位父元素，也就是說，如果某個(gè)元素相對定位了，那其下的子孫元素，在沒有其他定位元素隔離的情況下，將以這個(gè)父元素的包圍框?yàn)榛鶞?zhǔn)做絕對定位。
笨笨狗 (初級程序員) 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>  


本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
DIV+CSS中標(biāo)簽ul ol li dl dt dd用法 - ayajenson - 博
HTML CSS實(shí)現(xiàn)淘寶首頁
jQuery城市選擇單選多選代碼
利用vertical-align:middle實(shí)現(xiàn)在整個(gè)頁面居中
css的網(wǎng)頁布局案例
WordPress 主題制作指南（三）
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服