將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。只有三種情況會使得元素脫離文件流，分別是：浮動、絕對定位和相對定位。
static，無特殊定位，它是html元素預設的定位方式，即我們不設定元素的position屬性時預設的position值就是static，它遵循正常的文件流物件，物件占用文件空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。
relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對於什麼地方而言的呢？這個是個重點，也是最讓我迷糊的乙個地方，現在讓我們來做個測試，我想大家都會明白的：
初始化未定位
/******初始*********/
"first"> first
"second">second
2. 修改first元素的position屬性：
相對定位相對的是它原本在文件流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文件流，它沒有脫離文件流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的乙個中間過渡屬性，最重要的是它還占有文件空間，而且佔據的文件空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據虛線位置( top / left / right / bottom 等屬性生效之前)進行的定位
既然top / right / left / bottom 屬性是不會對relative定位的元素所佔據的文件空間產生偏移，那麼margin / padding會讓該文件空間產生偏移嗎？答案是肯定的，我們一起來做個試驗吧：
新增margin屬性：
對比一下，我們先將first元素外邊距設為20px，那麼second元素就得向下偏移40px，所以margin是佔據文件空間！同理，大家可以自己動手測下padding的效果
使用absoult定位的元素脫離文件流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的， 舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算），直到標籤為止，這裡還需要注意的是，relative和static方式在最外層時是以標籤為定位原點的，而absoulte方式在無父級是position非static定位時是以作為原點定位。和元素相差9px左右。
新增absoulte屬性：
"first">relative
"second">absoult
我們如果使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少乙個，否則left/right/top/bottom屬性會使用它們的預設值 auto ，這將導致物件遵從正常的html布局規則，在前乙個物件之後立即被呈遞，簡單講就是都變成relative，會占用文件空間，這點非常重要，很多人使用absolute定位後發現沒有脫離文件流就是這個原因
在absoulte定位中新增margin / padding屬性：
"first">first
"second">second
祖先類的margin會讓子類的absoulte跟著偏移，而padding卻不會讓子類的absoulte發生偏移。總結一下，就是absoulte是根據祖先類的border進行的定位。
固定定位(fixed)：
fixed定位，又稱為固定定位，它和absoult定位一樣，都脫離了文件流，並且能夠根據top、right、left、bottom屬性進行定位，但不同的是fixed是根據視窗為原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移。
z-index屬性：
z-index，又稱為物件的層疊順序，它用乙個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個物件的此屬性具有同樣的值，那麼將依據它們在html文件中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
css 中相對定位和絕對定位
1.css中定位機制有三種 標準文件流,浮動,絕對定位 2.絕對定位就屬於第三種定位,用到position屬性,下面就是具體設定 相對定位 相對於自身原有位置 就是普通流的時候 進行偏移 設定top,left.後 仍然處於標準文件流中 隨即擁有偏移屬性和z index屬性 絕對定位 建立了以包含塊為...
css中的相對定位和絕對定位
這幾天在看div css，在網上找到了很多的資料，我都不知道選擇哪乙個了。這兩天在看 十天學會web標準 div css 感覺還可以。把今天學習過程中遇到的問題和知識點，給記錄下來。首先學習到的是css中的相對定位和絕對定位。定位標籤 position 包含屬性 relative 相對 absolu...
css中的相對定位和絕對定位
原文 這幾天在看div css，在網上找到了很多的資料，我都不知道選擇哪乙個了。這兩天在看 十天學會web標準 div css 感覺還可以。把今天學習過程中遇到的問題和知識點，給記錄下來。首先學習到的是css中的相對定位和絕對定位。定位標籤 position 包含屬性 relative 相對 abs...