兩層容器的position 之間的關係，兩層position
在HTML的CSS種，容器如DIV有三種position屬性：static, relative,absolute。其中static為預設屬性，relative意為相對父容器定位，absolute意為相對可定位的上層容器進行定位，這個上層容器不一定是父容器，若找不到可定位的上層容器，則會以document.body進行定位。
若容器套容器，它們之間如何相互作用？見下面的實驗。
1、兩級DIV定位實驗
<html><head><meta http-equiv="Content-Language" content="en-us"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>position test[relative + absolute模式]</title><style>.div2 {position:absolute;right:50%;top:0%;border:solid 1px #0000ff; } .div4 {position:relative;right:50%;top:0%;border:solid 1px #0000ff; } .div6 {position:relative;right:50%;top:0%;border:solid 1px #0000ff; } .div8 {position:absolute;right:50%;top:0%;border:solid 1px #0000ff; } .div10 {position:absolute;right:50%;top:0%;border:solid 1px #0000ff; } .div12 {position:relative;right:60;top:0%;border:solid 1px #0000ff; } </style></head><body><p><h1>position test</h1></p><div id="div" style="width:400;height:300;border:1px solid #ff0000;position:relative;">1、外：relative，內：absolute，內DIV寬度等於文字寬度<br>外：relative，內：absolute<br>外：relative，內：absolute<br>外：relative，內：absolute<br><div class="div2" id="div2"> TEST IS OK!</div></div><div id="div3" style="width:400;height:300;border:1px solid #ff0000;position:relative;">2、外：relative，內：relative，<br>內DIV寬度等於父容器寬度<br><div class="div4" id="div4"> TEST IS OK!</div></div><div id="div5" style="width:400;height:300;border:1px solid #ff0000;">3、外：static，內：relative，<br>內DIV寬度等於父容器寬度<br>內DIV寬度等於父容器寬度<br><div class="div6" id="div6"> TEST IS OK!</div></div><div id="div7" style="width:400;height:300;border:1px solid #ff0000;">4、外：static，內：absolute，<br>內DIV寬度等於文字寬度<br>百分比以視窗大小為座標<br><div class="div8" id="div8"> TEST IS OK!</div></div><br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<br>555555555555555555555555555555555555555555555555555555<div id="div9" style="width:400;height:300;border:1px solid #ff0000;position:absolute;">5、外：abslolute，內：absolute，<br>內DIV寬度等於文字寬度<br>百分比以父容器大小為座標<br>外DIV浮動<br><div class="div10" id="div10"> TEST IS OK!</div></div><br><br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<br>6666666666666666666666666666666666666666666666666666666<div id="div11" style="width:400;height:300;border:1px solid #ff0000;position:absolute;">6、外：absolute，內：relative，<br>內DIV寬度等於父容器寬度<br>百分比以視窗大小為座標<br>外DIV浮動<br><div class="div12" id="div12"> TEST IS OK!</div></div><p>關係表</p><p><font face="宋體">↑</font></p><script lang="javascript">//var x =(document.body.offsetWidth - document.getElementById('div2').offsetWidth)/2;//document.getElementById('div2').style.left = x;</script><table border="1" width="57%" style="border-collapse: collapse"><tr><td width="4%"> </td><td width="12%" align="center"><font size="2">外</font></td><td width="15%" align="center"><font size="2">內</font></td><td width="16%" align="center"><span lang="zh-cn"><font size="2">內DIV寬度</font></span></td><td width="145" align="center"><font size="2">百分比座標</font></td></tr><tr><td width="4%" align="center">1</td><td width="12%"><font size="2">relative</font></td><td width="15%"><font size="2">absolute</font></td><td width="16%"><font size="2">文字寬度</font></td><td width="145"><font size="2">父容器</font></td></tr><tr><td width="4%" height="22" align="center">2</td><td width="12%" height="22"><font size="2">relative</font></td><td width="15%" height="22"><font size="2">relative</font></td><td height="22" width="16%"><font size="2">父容器寬度</font></td><td height="22" width="145"><font size="2">父容器</font></td></tr><tr><td width="4%" align="center">3</td><td width="12%"><font size="2">static</font></td><td width="15%"><font size="2">relative</font></td><td width="16%"><font size="2">父容器寬度</font></td><td width="145"><font size="2">父容器</font></td></tr><tr><td width="4%" align="center">4</td><td width="12%"><font size="2">static</font></td><td width="15%"><font size="2">absolute</font></td><td width="16%"><font size="2">文字寬度</font></td><td width="145"><font size="2">瀏覽器視窗</font></td></tr><tr><td width="4%" align="center">5</td><td width="12%"><font size="2">absolute</font></td><td width="15%"><font size="2">absolute</font></td><td width="16%"><font size="2">文字寬度</font></td><td width="145"><font size="2">父容器</font></td></tr><tr><td width="4%" align="center">6</td><td width="12%"><font size="2">absolute</font></td><td width="15%"><font size="2">relative</font></td><td width="16%"><font size="2">父容器寬度</font></td><td width="145"><font size="2">父容器</font></td></tr><tr><td width="4%"> </td><td width="12%"> </td><td width="15%"> </td><td width="16%"> </td><td width="145"> </td></tr><tr><td width="4%"> </td><td colspan="4"><font size="2">結論：1、容器內子組件的寬度和定位屬性在relative</font><span lang="zh-cn"><font size="2">下與父容器無關；</font></span><p><font size="2">子組件position為absolute<span lang="zh-cn">時定位在父容器的</span>absolute<span lang="zh-cn">和</span>relative<span lang="zh-cn">下表現相同</span>,</font></p><p><span lang="zh-cn"><font size="2">文字寬度屬性與父容器無關。</font></span></p><p><span lang="zh-cn"><font size="2">2、子組件為</font></span><font size="2">absolute</font><span lang="zh-cn"><font size="2">時，預設寬度均為文字寬度；子組件為relative時，預設寬度均為父容器寬度</font></span></td></tr></table></body></html>
註：運行效果因網站代碼的加工處理，不能直接在此完整體現，請將代碼拷貝至瀏覽器中運行。
2、關係表
| 外 | 內 | 內DIV寬度 | 百分比座標 | |
| 1 | relative | absolute | 文字寬度 | 父容器 |
| 2 | relative | relative | 父容器寬度 | 父容器 |
| 3 | static | relative | 父容器寬度 | 父容器 |
| 4 | static | absolute | 文字寬度 | 瀏覽器視窗 |
| 5 | absolute | absolute | 文字寬度 | 父容器 |
| 6 | absolute | relative | 父容器寬度 | 父容器 |
| 結論：1、容器內子組件的寬度和定位屬性在relative下與父容器無關； 子組件position為absolute時定位在父容器的absolute和relative下表現相同, 文字寬度屬性與父容器無關。 2、子組件為absolute時，預設寬度均為文字寬度；子組件為relative時，預設寬度均為父容器寬度 |
||||
用Div+CSS進行網站布局時，做一些浮動層等特殊特殊效果時要考慮到定位問題。這就要用到Position屬性等。
Position屬性有四個值：static、fixed、absolute和relative，
後面兩個在布局中的定位裡是經常用到的，顧名思義，
absolute是指絕對位置，即將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對位置，而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。
ralative是指相對定位，就是依據left，right，top，bottom等屬性在正常文檔流中位移位置。
但是，怎麼個絕對法，又怎麼個相對法呢？
以前我一直沒有仔細去研究它，到具體應用時有時會有點迷糊，我相信很多朋友也會有這樣的問題。今天我特意測試了一下，得出了以下結論：
1、當Position屬性值為Relative時對象原來佔有的位置保留，其後面的對象按原來文檔流仍然保持原來的位置Top的值表示對象相對原位置向下位移的距離bottom的值表示對象相對原位置向上位移的距離兩者同時存在時，只有Top起作用。left的值表示對象相對原位置向右位移的距離right的值表示對象相對原位置向左位移的距離兩者同時存在時，只有left起作用。
2、當Position屬性值為absolute時對象從文檔流中抽取出來，原佔有的位置被後面的對象頂替上來Top的值表示對象上邊框與瀏覽器視窗頂部的距離bottom的值表示對象下邊框與瀏覽器視窗底部的距離兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致，即垂直保持位置不變。left的值表示對象左邊框與瀏覽器視窗左邊的距離right的值表示對象右邊框與瀏覽器視窗右邊的距離兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。
在Position屬性值為absolute的同時，如果有一級父物件（無論是父物件還是祖父物件，或者再高的輩分，一樣）的Position屬性值為Relative時，則上述的相對瀏覽器視窗定位將會變成相對父物件定位，這對精確定位是很有協助的。
對於div定位的問題:position:relative;與position:absolute;
你可以分別用絕對位置和相對定位來控制4個容器之間的位置關係，容器3離頁面頂端10個像素，可以用(position:absolute;top：10px;），而其次是容器4距離容器3底部10個像素，可以用（position:relative;top：10px;），而下面的直接以此類推。不知道你還能明白我的意思哈~
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style>
body{ margin:0px; padding:0px;}
.style3{ width:400px; height:100px; border:1px solid #333; position:absolute; top:10px;}
.style4{ width:400px; height:100px; border:1px solid #333; position:absolute; top:120px;}
.style1{ width:200px; height:100px; border:1px solid #333; position:absolute; top:230px;}
.style2{ width:200px; height:100px; border:1px solid #333; position:absolute; top:340px;}
</style>
<body>
<div class="style1">容器1</div>
<div class="style2">容器2</div>
<div class="style3">容器3</div>
<div class="style4">容器4</div>
</body>
</html>...餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
