css 定位 (positioning) 屬性允許你對元素進行定位。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也很讓人吃驚。
css 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (x)html 中的位置決定。
塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（line box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
定位是通過使用 position 屬性來實現。我們可以選擇 4 種不同型別的定位，這會影響元素框生成的方式。
position 屬性值的含義：
static
元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留！！
absolute
元素框從文件流完全刪除，並相對於其父級元素定位。父級元素可能是文件中的另乙個元素或者是初始包含塊（body）。
元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣！！
元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。
fixed
元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。
絕對定位是相對於父級元素而言的，也就是絕對定位必須由乙個參照物（預設為父級元素）。
固定定位是元素絕對固定在某個位置。
相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素「相對於」它的起點進行移動。
如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。
#box_relative效果圖：
注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
設定為絕對定位的元素框會從文件流完全刪除，並相對於其父級元素定位，父級元素可能是文件中的另乙個元素或者是初始包含塊。
元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。
元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。
絕對定位使元素的位置與文件流無關（類似float的效果），因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative效果圖：
絕對定位的元素的位置相對於最近的已定位祖先元素（父級元素），如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（body）。
相對定位是「相對於」元素在文件中的初始位置，元素原來的空間還會占用；
而絕對定位是「相對於」最近的已定位父級元素，如果不存在已定位的父級元素，那麼「相對於」最初的包含塊，且絕對定位類似float，元素不存在原來空間一說。
fixed經常用於**的頂部固定。
理解CSS浮動float 定位position
一 浮動float i 定義及規則 float預設為none,對應標準流的情況。當float left 時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。ii 演示規則 準備 xml html code複製內容到剪貼簿 wxdwhjv 1 中間給 f...
CSS快速入門
cascading style sheets層疊樣式表，用於頁面美化和布局控制。層疊 多個樣式可以作用在同乙個html的元素上，同時生效。在標籤內使用style屬性指定css hello cssdiv 在head標籤內，定義style標籤，style標籤的標籤體內容就是css lang en cha...
快速了解CSS絕對定位和相對定位
我們都知道css定位有很多，今天我們來簡單了解絕對定位 absolute 和相對定位 relative 1絕對定位 absolute 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於html h2 2相對定位 relative 相對定位元素經常被用來作為絕...