position屬性：用於定義建立元素布局所用的定位類型，該屬性有多個值：
值 |
描述 |
static |
預設值。沒有定位，元素出現在正常流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
relative |
產生相對定位的標籤，相對於標籤原來位置進行定位。因此，“left:20” 會向標籤的left位置添加 20 像素。 |
absolute |
產生相對定位的標籤，相對於標籤本身第一個position為非 static父元素進行定位。標籤的位置通過 “left”, “top”, “right” 以及 “bottom” 樣式屬性進行規定。如果該標籤所在的父標籤均沒有設定position為非 static，則相對於瀏覽器視窗進行定位，但是此時元素會隨著滾動調的滑動而滑動。 |
fixed |
產生絕對位置的標籤，相對於瀏覽器視窗進行定位，此時元素不會隨著滾動調的滑動而滑動。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
（文檔流又稱正常流，是預設情況下HTML元素排版版面配置階段中元素會自動按照自上而下或從左往右進行流式排放的一種順序）
注意：任何元素都可以定位，但absolute或fixed元素會產生一個塊級框，不論該元素本身是不是塊級框。relative元素會相對於它在正常流中的預設位置位移。IE瀏覽器都不支援"inherit"屬性值 。
當一個標籤使用了position CSS樣式屬性，如果其樣式屬性值為非static（不考慮inherit）則該標籤將脫離正常文檔流，如果又沒有指定 “left”, “top”, “right” 以及 “bottom” 樣式屬性的屬性值，則該標籤只待在原來位置，但已經脫離正常文檔流
下為示範代碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #z{ width: 300px; height: 300px; border: 1px solid royalblue; position: relative; } #a,#b,#c{ width: 100px; height: 100px; } #a{ background: red; position: relative; right: 10px; } #b{ background: green; position: fixed; left: 1000px; bottom: 20px; /*只需要規定兩個方向就可以了，上下，左右各選其一*/ } #c{ background: yellow; position: absolute; left: 10px; bottom: 3px; } </style> </head> <body> <div id="z"> <div id="a"></div> <div id="b"></div> //加空格用於複習div的區塊層級元素性質 <div id="c"></div> //加了空格後，c的div會自動換行 block的屬性所致 </div> </body></html>
示範注釋：
position中：
relative 是相對於標籤原來的位置點進行定位的 仍存在於文檔流中
fixed 是相對於整個瀏覽器來定位的 直接無視瀏覽器裡面的標籤元素 類似於“浮起來”了
absolute是相對於上一級[如. b對z]第一個（父）元素（要求為非static屬性）來定位的 而且定位標準是依據父元素的外界邊框來確定的
下為示範結果：
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
