也許你看到這個標題覺得很簡單，確實這是一篇關於CSS中Position屬性基礎知識的文章，但是關於Position的一些細節也許你不瞭解。
1、簡介
position有五個屬性： static | relative | absolute | fixed | inherit
static 和 inherit : 沒什麼值得介紹的。
relative : 相對於元素自身的定位。
absolute ：相對於包含塊的定位。
fixed : 相對於視窗的定位。
2、包含塊
包含塊就是 top | right | bottom | left 參考的元素。
absolute的包含塊指的是：該元素最近的具有定位設定的父元素，即最近的position屬性值不為static的祖先元素舉個例子：
<body>
<div id="outer" style="position:absolute">
<div id="inner">
<span style="position:absolute">span</span>
</div>
</div>
</body>
對於span元素來講，它的包含塊是#outer，而不是#inner,因為#outer設定了 position:absolute。值得注意的是，只要#outer設定了 absolute | relative | fixed span元素的“定位父元素”就是#outer，如果outer沒有設定三種屬性的其中之一，則span的包含塊就是html元素。
relative的包含塊指的是：元素自身。
3、top | right | bottom | left 的細節。
也許你會想當然的認為這些值有什麼細節可言，那你就錯了。在此以left為例：
left值 = “定位父元素”border內邊 到 該元素margin外邊的舉例 ，簡單的記憶就是“border內,margin外”。
right | bottom | left 也是這種道理
4、z-index
關於z-index的細節，這裡就不說了，因為覺得自己表達不清，而且《CSS權威指南》相應章節裡對z-index講的非常清楚(特別是疊放內容相關的相關知識)，這些知識是非常有用的。
如果你能看懂下面這個層疊順序，則證明你對z-index的學習已經非常成熟了。要注意其中#one1 元素 #two元素的層疊順序。
例子：http://www.kangchangan.cn/cnblog/zIndexStackingContext.html
5、postion 與文檔流
只要元素設定了 postion : absolute | relative | fixed ， 該元素就會脫離文檔流。
但是relative元素是個特例，因為該元素對然脫離了文檔流，但是它原本所佔的空間仍然佔據文檔流。
例如：
代碼
<!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=utf-8" />
<title>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
position:relative;
left:50px;
top:40px;
background-color:#FF9900;
}
</style>
</head>
<body>
<p> rain-man rain-man rain-man rain-man rain-man <br />
rain-man rain-man <span>cnblog</span> rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br /></p>
</body>
</html>
6、positon 與 display
元素分為內嵌元素和區塊元素兩類（當然也有其它的），在內嵌元素中有個非常重要的常識，即內兩元素是不可以設定區塊元素所具有的樣式，例如:width | height。
relative : 原來是什麼類型的依舊是什麼類型。
absolute | fixed ： 元素就被重設為了區塊元素，例如：打算為span元素指定大小，並絕對位置
<span style="position:absolute; width:100px; height:50px;">span</span>這是完全正確的，
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>，這裡的display:block就是多餘的了。
7、position 與 float
一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流(這是自己起的名字，呵呵)”。
但是 relative 卻可以。因為它原本所佔的空間仍然佔據文檔流。
8、Bug
Bug1:
參考網頁: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html，哎這個就是IE的bug了，解決辦法就是為#container設定 z-index:11 || 大於10的整數。
Bug2：
bug頁面：http://www.kangchangan.cn/cnblog/floatPosition.html
解決頁面：http://www.kangchangan.cn/cnblog/floatPosition2.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
