本文為大家解析了CSS Position定位,供大家參考,具體內容如下
當人們剛接觸布局的時候都比較傾向于使用定位的方式。因為定位的概念看起來好像比較容易掌握。表面上你確切地指定了一個塊元素所處的位置那么它就會坐落于那里。可是定位比你剛看到的時候要稍微復雜一點。對于定位來說,有一些東西會絆倒新手,所以在它成為你的慣用技巧前你需要掌握它們。
一旦你更深入地了解了它是怎么運作的,你就能夠做出一些更棒的事情來。
CSS盒模型和定位的類型
為了搞清楚定位首先你得了解CSS盒模型。在上一句中的鏈接是我寫在InstantShift 中的一篇關于盒模型的文章。我在那篇文章做了詳細的講解并會在這篇文章中做一個快速的總結。
在CSS中,每一個元素都由一個矩形盒子所包含。每一個盒子都會具有一個內容區,內容區被一個內邊距所包裹,內邊距外是盒子的邊框,并且在邊框之外會有一個外邊距用于與其他盒子分隔開來。這些你可以從下面這張圖片看到。
定位模式規定了一個盒子在總體的布局上應該處于什么位置以及對周圍的盒子會有什么影響。定位模式包括了常規文檔流,浮動,和幾種類型的 position 定位的元素。
CSS position 屬性可以取5種值:
新聞熱點
疑難解答