CSS中的Position属性
1、簡介
?position有五個屬性： static | relative | absolute | fixed | inherit
?static 和 inherit : 沒什么值得介紹的。
?relative : 相對于元素自身的定位。
?absolute ：相對于包含塊的定位。
?fixed : 相對于窗口的定位。
?
2、包含塊
包含塊就是 top | right | bottom | left 參考的元素。
absolute的包含塊指的是：該元素最近的具有定位設置的父元素，即最近的position屬性值不為static的祖先元素舉個例子：
<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元素是個特例，因為該元素對然脫離了文檔流，但是它原本所占的空間仍然占據文檔流。
例如：
Code?
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
轉載于:https://www.cnblogs.com/htys/p/3227413.html
總結
以上是生活随笔為你收集整理的CSS中的Position属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python中关于XML-RPC原理
- 下一篇： CSS3学习——设计优雅的数据表格