每次用div＋css布局的時候都混亂的不行，所以決定仔細梳理一遍，加強理解和記憶^^。css 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。
「文件「」就是網頁的頁面，doctype；「流」就是指頁面上的元素輸入輸出的形式和順序，其中「輸入」是布局，輸出是「顯示」；綜合起來就是：頁面布局＋顯示的形式。
在css中，通過position屬性，配合top,right,left,buttom對元素進行定位。1.預設定位：staticposition屬性有：static，relative，absolute，fixed,下面來詳細分析：
塊元素相對於瀏覽器布局，一行乙個，自動換行。
顯示結果：2.相對定位：relative
相對定位就應該是相對於乙個東西來定位，而這個東西就是元素自己本身，用left right top b0ttom進行定位後，元素會根據原來的位置進行移動，但由於position:relative這個屬性並沒有脫離文件流的，所以元素本身所佔的位置會保留。
顯示結果：3.絕對定位：absolute塊二通過position:relative相對於原來的位置左移50px; 上移20px得到的，而且塊三並沒有因為塊二的上移而上移，原因就是position:relative這個屬性是沒有脫離文件流的，所以元素本身所佔的位置會保留。
所謂絕對定位，其實也是相對於某個東西來絕對定位，而這個東西就是靠元素的最近的乙個有position，且positon不能為static的祖先元素，一般來說是position為relative的父級元素，如果沒有，則相對於body定位；值得注意的是position:absolute這個屬性是脫離文件流的，所以重新定位後元素是不會佔著原來的位置的，從原來的文件中分離被孤立了出來。
顯示結果：塊二相對於dad塊下邊界20px，相對於dad塊左邊界50px；而塊三向上移動佔據了本來屬於塊二的位置，原因在於position:absolute這個屬性是脫離文件流的，所以重新定位後元素是不會佔著原來的位置的，從原來的文件中分離被孤立了出來。4.固定定位：fixed
元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身,它的位置始終相對於視窗，可以實現固定導航欄的效果，也這意味著即便頁面滾動，它還是會停留在相同的位置， top 、 right 、 bottom 和 left 屬性都可用。
css定位機制
定位屬性position 相生相剋 1 static 靜態定位 2 relative 相對定位 相對於自己原來的位置定位 3.absolute 絕對定位 float 具有強大的破壞性，父容器管不住 4.fixed 固定定位 相對於瀏覽器定位不是相對於文件定位 css其他定位屬性 1 z index ...
CSS定位機制
在css的定位機制中，分別有如下三種 1.文件流 2.浮動 float 3.定位 position 所謂文件流，即元素排版布局過程中，元素會自動從左往右，從上到下的流式排列。脫離文件流，即將元素從普通的布局排版中拿走 打亂排列順序 其他盒子在進行定位的時候，會當做脫離文件流的元素不存在而進行定位。p...
CSS定位機制
將各個盒子進行定位 是一種預設方式，各個盒子從上到下，從左到右排列 元素分為三類，包括block inline inline block型別 display none 元素不被顯示 像影象軟體中的圖層一樣可以對每個layer能夠精確定位操作，用position屬性 相對於誰定位 進行設定 通過top...