在前端中，position是很常見的屬性。通過這個屬性可以調整dom元素在瀏覽器中顯示的位置。
它有幾個常用的屬性：
其中relative、position、fixed比較難於理解，下面就介紹下這三個：
看意思是相對定位，那麼是相對什麼進行定位呢？其實是相對它原本的位置。比如學生站隊，教練喊小明。小明出隊，向前走了一步。
這就相當於:
小明當我們對第2個span新增相對定位後，它先對於原始的位置偏移。
這個屬性比較複雜，看屬性的名字是絕對定位，其實不然。
它也是一種相對定位，不過相對的不再是自己，而是父元素。具體是哪個父元素，就要看父元素是否應用了position屬性。
舉個例子，最開始我們有3個巢狀的div
如果對第3個div應用absolute定位，那麼會出現下面的效果：
如果對div-1應用position為relative或者absolute，則div-3就會相對div-1進行定位。
由此可以看出，如果父元素沒有應用position樣式，那麼就會繼續向上查詢，直到html元素。如果都沒有找到，absolute就會根據html進行定位；相反，如果找到某個父元素有absolute或者relative或者fixed，則會先對這個元素進行定位。
這個就比較容易理解了，它是相對瀏覽器的視窗進行定位。
比如的推薦按鈕，或者導航，都可以應用這個position樣式。
posted @
2016-02-16 20:01
xingoo 閱讀(
...)
編輯收藏
CSS學習之position定位
定位在css中可謂是布局的常用手段，配合浮動能使網頁布局更加的靈活多變，今天跟大家一起分享下學習定位的一點小結 css中預設不開啟定位，其元素的position屬性預設值為static。若想要元素定位，則需手動開啟定位，即設定position的屬性值可選為 relative，absolute，fix...
CSS元素之position 定位
值 屬性inhert 規定應該從父元素繼承 position 屬性的值。static 預設值。沒有定位，元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 relative 生成相對定位的元素，相對於元素本身正常位置進行定位。因此，left 20 會向...
CSS 定位position屬性
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...