標籤：移動元素 不同的 預設 問題 對象 自身 style ati 根據
在CSS2.0 HandBook上的解釋是：
設定此屬性值為 absolute 會將對象拖離出正常的文檔流絕對位置而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內補丁( padding )和邊框( border )。
要啟用物件的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，並且設定此屬性值為 absolute 。否則上述屬性會使用他們的預設值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞。
TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）只有當設定了position屬性才有效。
當設定position:absolute
如果父級（無限）沒有設定position屬性，那麼當前的absolute則結合TRBL屬性以瀏覽器左上方為原始點進行定位
如果父級（無限）設定position屬性，那麼當前的absolute則結合TRBL屬性以父級（最近）的左上方為原始點進行定位。
當設定position: relative
則參照父級（最近）的內容區的左上方為原始點結合TRBL屬性進行定位（或者說相對於被定位元素在父級內容區中的上一個元素進行位移），無父級則以BODY的左上方為原始點。相對定位是不能層疊的。在使用相對定位時，無論元素是否進行移動，元素依然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。
一般來講，網頁置中的話用Absolute就容易出錯，因為網頁一直是隨著解析度的大小自動適應的，而Absolute則會以瀏覽器的左上方為原始點，不會應為解析度的變化而變化位置。有時還需要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是自然數。當然有一點要注意，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
設定此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行位移。在相對(relative)定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會佔有它的自然空間。放置絕對(absolute)定位對象在可視地區之外會導致捲軸出現。而放置相對(relative)定位對象在可視地區之外，捲軸不會出現。其實對於定位的主要問題是要記住每個定位的意義。相對定位是“相對於“元素在文檔流中初始位置的，而絕對位置是”相對於“最近的已經定位的祖先元素。
總結如下：
先看下面這一個層結構
<body>
<div id=posi>
<div id=rel> 此層只應用position：relative;樣式 </div>
<div id=abs> 此層只應用position：absolute;樣式 </div>
<div id=sss> 不應用樣式 <div>
</div>
</body>
1、absolute：不佔位、relative：有佔位！
如上層結構:
id為rel的層在顯示時，會佔用一行！其後面的abs層只會在下一行顯示出來！
id為abs的層在顯示時，會與後面id為sss的重疊在一起！
2、預設情況下（不結合top等來定位），absolute（絕對位置）以父層來定位的
如上面的id為abs的層，如果不結合top等來定位，則其顯示位置會隨父級posi層（posi在文檔左下角，其也會在左下角）
3、在結合top、bottom、right、left等屬性時，absolute（絕對位置）以視窗做為定位，relative以自身的佔位為基準做位移！如下：
<body>
<div id=posi>
<div id=sss> 不應用樣式 <div>
<div id=rel> 此層應用position：relative;bottom：30px;樣式 </div>
<div id=abs> 此層只應用position：absolute;bottom：30px;樣式 </div>
</div>
</body>
以上代碼：
id為rel的層會上移並與id為sss的層重疊
id為abs的層會以視窗為基準，移至距離視窗30像素的位置！
4、在結合top、bottom、right、left等屬性時，如果想absolute（絕對位置）能以父層做為定位基準的話，則在父層應用absolute或relativ屬性就可以!如下：
<body>
<div id=posi style=”position：relative”>
<div id=rel> 此層應用position：relative;bottom：30px;樣式 </div>
<div id=abs> 此層只應用position：absolute;bottom：30px;樣式 </div>
</div>
</body>
以上代碼：id為posi的層，也可以用absolute屬性！
id為rel的層，不受影響，以自身的佔位為基準做位移！
註：id為abs的層是以id為posi層的底邊做為定位基準，如果此時posi層的高度小於30px的話，abs層則可能沒辦法看到。
CSS中的 position:：absolute和position：relative
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
