定位的認識
1.static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。
2.relative：對象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
3.absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
4.fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現(xiàn)滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。
什么是文檔流？ 將窗體自上而下分成一行行,
并在每行中按從左至右的順序排放元素,即為文檔流。
只有三種情況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。 靜態(tài)定位(static)
： static，無特殊定位，它是html元素默認的定位方式，即我們不設(shè)定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象，對象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。 相對定位(relative)
： relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對于什么地方而言的呢？這個是個重點，也是最讓人疑問的一個地方，現(xiàn)在讓我們來做個測試，我想大家都會明白的：
(1) 初始未定位 代碼如下: /初始*/ first second
初始原圖：
(2) 我們修改first元素的position屬性： 代碼如下:
偏移20px后：
— >> 虛線是初始的位置空間現(xiàn)在大家應該有些明白了吧，相對定位相對的是它原本在文檔流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文檔流，它沒有脫離文檔流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absolute的一個中間過渡屬性，最重要的是它還占有文檔空間，而且占據(jù)的文檔空間不會隨
top / right / left / bottom
等屬性的偏移而發(fā)生變動，也就是說它后面的元素是依據(jù)虛線位置( top / left / right / bottom
等屬性生效之前)進行的定位，這點一定要理解。那好，我們知道了top / right / left / bottom
屬性是不會對relative定位的元素所占據(jù)的文檔空間產(chǎn)生偏移，那么margin / padding會讓該文檔空間產(chǎn)生偏移嗎？答案是肯定的，我們一起來做個試驗吧： (3)
添加margin屬性： 代碼如下:
設(shè)置margin：20px后： 對比一下，是不是就很清晰了，我們先將first元素外邊距設(shè)為20px，那么second元素就得向下偏移40px，所以margin是占據(jù)文檔空間！同理，大家可以自己動手測下padding的效果吧！ 絕對定位(absolute)
： absolute定位，也稱為絕對定位，雖然它的名字號曰“絕對”，但是它的功能卻更接近于"相對"一詞，為什么這么講呢？原來，使用absolute定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的， 舉個例子，a元素使用absolute定位，它會從父類開始找起，尋找以position非static方式定位的父類元素(注意，一定要是直系父級才算），直到標簽為止，這里還需要注意的是，relative和static方式在最外層時是以標簽為定位原點的，而absolute方式在無父級是position非static定位時是以作為原點定位。和元素相差9px左右。我們來看下效果： (4) 添加absolute屬性： 復制代碼 代碼如下: relative absolute
效果圖： 看了上面的代碼后，細心的朋友肯定要問了，為什么absolute定位要加
top:0; left:0;
屬性，這不是多此一舉嗎？其實加上這兩個屬性是完全必要的，因為我們?nèi)绻褂胊bsolute或fixed定位的話，必須指定
left、right、
top、
bottom
屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的默認值
auto
，這將導致對象遵從正常的html布局規(guī)則，在前一個對象之后立即被呈遞，簡單講就是都變成relative，會占用文檔空間，這點非常重要，很多人使用absolute定位后發(fā)現(xiàn)沒有脫離文檔流就是這個原因，這里要特別注意~~~ 少了left/right/top/bottom屬性不行，那如果我們多設(shè)了呢？例如，我們同時設(shè)置了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規(guī)則： ·
如果top和bottom一同存在的話，那么只有top生效。
如果left和right一同存在的話，那么只有l(wèi)eft生效。既然absolute是根據(jù)父類中的position非static元素進行定位的，那么父類中的margin/padding會不會對position產(chǎn)生影響呢？看個例子先： (5) 在absolute定位中添加margin / padding屬性： 復制代碼 代碼如下: #first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;} #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;} first second
效果圖： 看懂了，父類的margin會讓子類的absolute跟著偏移，而padding卻不會讓子類的absolute發(fā)生偏移?？偨Y(jié)一下，就是absolute是根據(jù)父類的border進行的定位。另外，絕對(absolute)定位對象在可視區(qū)域之外會導致滾動條出現(xiàn)。而放置相對(relative)定位對象在可視區(qū)域之外，滾動條不會出現(xiàn)。使用絕對(absolute)定位的時候，一般都是與相對(relative)定位成對出現(xiàn)的，如果發(fā)現(xiàn)定位對象位置不正確，先檢查一下父類元素是哪一個，相對而立才能生效。 固定定位(fixed)
： fixed定位，又稱為固定定位，fixed總是以body為定位時的對象，總是根據(jù)瀏覽器的窗口來進行元素的定位，通過"left"、
"top"、
"right"、
"bottom"
屬性進行定位。fixed元素通常運用在需要固定元素的地方，比如html頁面中的搜索框，h5頁面中的底部導航等等，目的是為了讓定位對象固定在一個位置，不隨頁面滾動而改變。