本文為大家解析了CSS Position定位，供大家參考，具體內容如下
當人們剛接觸布局的時候都比較傾向于使用定位的方式。因為定位的概念看起來好像比較容易掌握。表面上你確切地指定了一個塊元素所處的位置那么它就會坐落于那里。可是定位比你剛看到的時候要稍微復雜一點。對于定位來說，有一些東西會絆倒新手，所以在它成為你的慣用技巧前你需要掌握它們。
一旦你更深入地了解了它是怎么運作的，你就能夠做出一些更棒的事情來。
CSS盒模型和定位的類型
為了搞清楚定位首先你得了解CSS盒模型。在上一句中的鏈接是我寫在InstantShift 中的一篇關于盒模型的文章。我在那篇文章做了詳細的講解并會在這篇文章中做一個快速的總結。
在CSS中，每一個元素都由一個矩形盒子所包含。每一個盒子都會具有一個內容區，內容區被一個內邊距所包裹，內邊距外是盒子的邊框，并且在邊框之外會有一個外邊距用于與其他盒子分隔開來。這些你可以從下面這張圖片看到。
定位模式規定了一個盒子在總體的布局上應該處于什么位置以及對周圍的盒子會有什么影響。定位模式包括了常規文檔流，浮動，和幾種類型的 position 定位的元素。
CSS position 屬性可以取5種值：
我會在下面對前三個值進行詳細的闡述并簡單地講解一下最后兩個值。
static 是 position 默認的屬性值。任何應用了 position:static 的元素都處于常規文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。
一個 static 定位的元素會忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用任何的這些屬性，你需要先為它的 position 屬性應用這三個值的其中之一： absolute，relative，fixed
position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素只是簡單地應用了與父元素一樣的 position 值。
絕對定位（Absolute Positioning）
絕對定位的元素會完全地從常規文檔流中脫離。對于包圍它的元素而言，它會將該絕對定位元素視為不存在。就好像 display 屬性被設為 none 一樣。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。
新聞熱點
疑難解答
