定位佈局

初步瞭解絕對定位：
咱們上次提到了浮動定位，浮動定位能夠用margin去推動一個元素在頁面上的位置，並且可讓div脫離文本流「浮起來」。今天咱們介紹第二大類也是更加劇要的佈局方式：「定位」
定位故名思議是給一個橫座標給一個縱座標而後把一個物體放置在制定的座標點上。css關鍵詞是position
position的可選項（定位方式）有五種：

別逼逼，讓咱們用代碼來更深入的體驗一下：

細心的同窗確定看到了有個屬性叫作z-index，這個屬性是用來在兩個絕對定位的元素同時在一個位置存在的時候決定誰在誰的上面渲染。舉個例子：

這種你們的z-index都是100的狀況下，固然是下面的div先渲染，由於後來居上。可是若是咱們改一下z-index的數值就能讓藍色的跑到前面來

OK絕對定位瞭解了咱們再來搞一下相對定位（relative）和fixed
relative跟absolute最不同的區別是，relative是須要跟本身本來存在的位置相比進行定位的，absolute是找到父級以及父級的父級（以此類推）中最近的一個有定位的（不是static）元素進行定位的：

仔細看看上面的代碼就能夠看出absolute和relative的去區別
fixed定位方式是用於在頁面滾動的時候，元素相對於瀏覽器窗口是靜止不變的

咱們在頁面上創造除了不少一級標籤，多到出現滾動條。

文案會相對於瀏覽器屏幕靜止不動，也就是吸頂的效果

float和position的區別:
float仍會在本來文檔流中佔位置，position會覆蓋文檔流中的其餘元素。

黃色邊框徹底不佔位置，若是寬度足夠的話會把文案遮住。 下面的css代碼咱們把佈局方式換成浮動：

影響了本來的文檔流，可是不會把沒有浮動的個人文案給遮住