第八篇 CSS定位
阿新 • • 發佈：2017-09-25
背景 htm 答案 等於 了解 塊級元素 容易 padding 有一個
CSS定位
CSS除了內外邊距控制元素，還有定位，看到“定位”兩個字，同學們應該就能清楚，它能夠做什麽。 在剛學習的時候，我也經常使用定位，來控制元素的位置，但是初學的同學可能會註意不到定位的一些“內涵”！所以會出現一些明顯的錯誤，也不知道怎麽去修正它，那麽下面我們就來介紹一下，這個定位究竟怎麽用才好呢。 因為是演示，老師的CSS會采用內聯、內嵌，比較方便（同學們以後的項目中，一定要采用外聯，高效安全）。 定位屬性：position 值：relative(相對定位)、absolute(絕對定位)、fixed(固定定位) 我們先來看看相對定位： HTML：<divCSS：id="div1">我是定位，相對定位</div>
#div1{
position: relative;
background-color:#dedede;
}
經過前面的幾篇學習，或者了解了WEB前端的HTML和CSS，這裏的代碼就不再解釋了，給背景色就是為了方便看出效果。我們給了div的樣式，讓它變成“相對定位”了，頁面上是沒有任何效果的，而要它發生“定位”改變，就要再使用兩個屬性，left和top，學習過盒子的同學，這兩個代碼的意思應該是明白的。但是我們這裏不是寫成"margin-left"或者"padding-left"，更加不是"position-left"，而是單單的給出"left"屬性後面再跟值，就可以了。#div1{
position: relative;
background-color:#dedede;
top:20px;
left:50px;
}
刷新頁面，能夠清楚看到效果，這個div距離頁面頂部20px，左側50px。那麽還有一個問題，有多少同學註意到了？頁面最低端，出現了一個滾動條！那麽是為什麽呢？
我們並沒有給div設置寬度，它是塊級元素，所以默認情況下，它的寬度，是占據整個頁面的寬度的。我們設置了它的定位為“相對定位”，它的寬度依舊會是頁面寬度，你讓它距離左側(left)50px，他移動過去了，但是寬度依舊不變，所以它這一行可以理解為：當前頁面寬度(1920px)+50px(left)，就大於了頁面本身寬度，所以下面就出現了滾動條。這就是相對定位。<div id="div1">我是定位，相對定位</div> <div id="div2">我不是定位，沒有任何屬性，看我位置</div>
為了區分，在div1下面添加一個div2，同學在頁面上測試代碼會發現，它們的位置...是同行的，如果將div1裏面的top值20改成50呢，試試效果：
#div1{
position: relative;
background-color:#dedede;
top:50px;
left:50px;
}
這樣的話，div1就在div2的下面去了，而且還能完全的看到div2的所有內容。之前的內容只能看到幾個字，後面的都被div1擋住了，這裏就關系到了層次。
同學們還發現沒有，div1的位置改變了，但是div2依舊是基於它誇了行，沒有占用div1原本的位置，也沒有因為div1移動了top:50px 而往下面走。div2的位置就等於是，就是基於了div1原本的位置下方跨了一次行。
這裏就是“相對定位”的特性，它雖然使用了left和top改變了位置，但是它本身占用的位置是不會改變的，其他的元素也不能占用它本身的位置。
我們可以再來試一下相對定位，這個位置是不是真的，別的元素不會占用，那麽我們給它設置一個高：
#div1{
height: 200px;
}
在div1裏加一個高，那麽效果就會發生改變，div2也會跟著往下面走，是因為，它沒有“移動”，它的div元素是在div1下面的，就會一直基於div1跨一次行，跟著老師做到這裏，有同學疑問，div2的內容又被壓著了，怎麽看到全部的內容呢？“position”定位，它還有一個屬性：z-index 層次，它的值為數字，可以為負數，不需要單位：
#div1{
z-index: -1;
}
給div1設置了層次為負1，在頁面上，不設置z-index的情況下，所有的元素z-index都可以理解為默認0，而設置了postion的會比沒有設置position的高，所以div1才會壓著div2，而現在div1層次設置成了負數，div2就可以壓著它了，其他元素也會壓著，這就是層次，立體模型一樣。再說一次，只有設置了position的元素，才可以設置z-index，否則無效哦。
絕對定位：
這個定位好用，但是不推薦用，老師學習的時候，幾乎全部用它，但那是錯誤的！！！
絕對定位，它的“內涵”，會使這個元素脫離文本，比如看看這個代碼：
HTML：
<div id="div3">我是絕對定位</div>CSS：
#div3{
position: absolute;
}
我們能夠發現，它不會改變對吧，但是我們寫定位，其實也就是希望它的位置發生改變，那麽我們再加兩行代碼：
#div3{
top:10px;
left: 10px;
}
在div3裏面，我們加上這兩行代碼，讓它發生位移，同學們會看到，它怎麽跑到div1和div2上面去了呢？如果說是相對定位，或者說用內外邊距，它也應該是在div1和div2下面距離10px，但是這裏，它卻在最頂端上了。
我們剛剛說到，絕對定位，它會脫離文本，可以理解為，它不在被其他元素影響，而成為一個獨立的，只會基於頁面最頂端和左側發生位移。
看到這裏，有同學肯定高興，那用絕對定位多好，全盤用它來改變位置。確實，老師曾經就這樣用過，但是老師問問同學們，你的分辨率寬度固定1920px，你讓1個10個N個元素成為絕對定位來位移，那麽這只是你的電腦而已，那麽如果別人的電腦分辨率只有1024px呢？你某一個元素位移1500px，那麽人家1024px的電腦看得到嗎？有同學說，會跟相對定位一樣，下方出現滾動條。讓我們來試試：
#div3{
left: 2000px;
}
將上面的代碼，left改成2000px吧，這樣測試的更直接，因為同學們基本上用的都是小於等於1920px的分辨率吧！
效果會怎麽樣呢？確實，出現了滾動條，我們往右側拉，會看到什麽呢？因為它超過了瀏覽器最大分辨率，所以它的內容變成了垂直顯示了。
那麽出現這種情況，同學們一定要覺得很嚴重，因為你想啊，人家的分辨率若比你的小，那內容不都變樣了？還有我們再在div3下面加一個div4試試，先將div3的top和left都設置成0px，設置成0的話，它們就會跑到基於頁面左上角去了。不設置的話，就會回到原本的位置上去。
我們在div3下面加一個div4：
<div id="div4">普通的div，什麽都不設置</div>同學能看到，div3確確實實跑到了頁面的左上角去了對吧，而div4也在div2下面！為什麽是在div2下面呢？因為div3設置成了絕對定位，它原本的位置，已經消失了，所以div4能夠占用它的位置，這裏就能區分相對和絕對的一個區別。然後我們再將div3的left和top取消，記住是取消掉哦，就是刪除它這兩個屬性。 刪除後，大家能看到，它回到了它原本的位置(div2的下面)，但是問題來了，它和div4重合了。是因為div3成了絕對定位，div4就直接頂替了它的位置，即使div3回來了，它也只是漂浮在頁面上的，不會被其他元素影響，也不會影響別的元素。同學們覺得，這樣方便管理嗎？我們二次開發的時候，難道別人也要跟著你一樣，全盤用絕對定位嗎？還有之後的“響應式布局”，不同分辨率不同效果，對嗎。 那絕對定位不推薦用，要它幹嘛？老師也覺得，但是它還有一個非常重要的用處，可以使它不基於瀏覽器左上角，而是基於它的“父親元素”，什麽是父親元素呢？又怎麽讓絕對定位有父親元素呢，看下面的代碼： HTML：
<div id="div5"> 我是父親元素，我還是相對定位 <div id="div5-1"> 我是絕對定位，我是div5的下一代 </div> </div>CSS：
#div5{
position: relative;
width: 500px;
height: 300px;
background-color: aqua;
}
#div5-1{
position: absolute;
left: 20px;
top:5px;
}
我們去頁面測試，同學們能看到，div5-1 這個元素div塊，它沒有跑到離開div5對吧，更沒有跑到頁面左上角，是因為它的父親元素影響到了它，而它的父親元素，必須設置成相對定位，才能影響它。如果div5不是相對定位，或者沒有設置定位，那麽div5-1會直接不承認div5是它的老爸，直接離家出走，跟著瀏覽器的左上角跑，真的哦。
這裏的效果，同學們看到沒有，老師給div5-1設置的top只有5px，它還跟父親元素的內容重合了，是因為什麽呢？它確實是基於它父親發生了位移，但是它基於的是，它父親的左上角，我們可以再加一行代碼和改動一下left、top試試：
#div5-1{
position: absolute;
left: 0px;
top:0px;
background-color: red;
}
給div5-1加一個背景色，容易區分嘛，然後top和left都改成0，可以看出效果，它確確實實是基於父親元素的左上角對吧！一點問題都沒。
這中絕對定位和相對定位搭配的方法，以後也會常用到的。
固定定位：
這個固定定位也就經常用到了！同學們看到，固定，它是固定的。經常用到哪裏呢？想是導航欄，你頁面不管這麽上下滑動，左右滑動，它都不會改變位置，永遠在哪裏，所以說，它更多用來做導航欄呢！
我們寫一段代碼玩玩：
HTML：
<div id="div6">我是固定定位</div> <div style="height:2000px;我高度2000px，是為了測試固定定位</div>CSS：
#div6{
position: fixed;
}
僅僅這樣的代碼，大家能夠滑動一下試試，這個div6的內容，是不是你上下滑動，它永遠都在那個位置，而且它和絕對定位是一樣的，脫離了文本，不和其他元素相互產生影響。我們給它加一個top和left，看看它是否基於頁面的左上角呢！
#div6{
position: fixed;
top: 0;
left: 0;
}
測試的同學能夠看到很明顯的效果，它確實也是基於頁面的左上角的！和絕對定位一樣。有同學發問，既然是一樣，那麽它是不是也能夠設置絕對定位作為父親，答案是：不會，它不會承認別人是它的父親，一樣的跑到頁面左上角去，同學可以自己測試一下，加深印象！
三個定位都演示完了，還有不懂的同學，請在下方發問。
第八篇 CSS定位