為什么會有position定位
基于定位的常見需求
不同需求的解決方案
動畫視頻：
文字解析：
我們知道每一個元素都是盒子
期望布局像搭積木一樣
從上往下挨個堆盒子就能完成各式各樣的頁面
然而多實現(xiàn)幾個頁面就會發(fā)現(xiàn)
文檔流中任意一個元素位置調整都會影響到后面的元素
簡直是牽一發(fā)動全身
每每捫心自問敢動嗎
都只能回答不敢動不敢動
有一種脫離文檔流的解決辦法就是浮動
但浮動規(guī)則的局限性很大
它會向左上角或右上角靠過去
可惜這兩個方向并不是布局的全部
日益增長的網(wǎng)頁復雜度
和落后的css布局方式之間的矛盾越來越大
讓定位需求變得越來越復雜：
1.讓元素可以相對于它自己的位置定位
2.讓元素可以在父元素范圍內(nèi)任意位置定位
3.讓元素可以在屏幕范圍內(nèi)任意位置定位
對于第一種需求
讓元素可以相對于它自己的位置定位
比如像這樣
讓元素相對于自身向下向右偏移一點
也許有人會想到用margin 或padding
但這樣搞會影響到后面的元素
后面的元素又要想盡各種辦法歸位
過程曲折到可以寫一部30集的連續(xù)劇
用一次就會感到萬分沮喪甚至開始懷疑人生
所以我們希望有一種定位方式
讓元素相對于自身偏移
且不會影響文檔流
首先設置元素的postion為relative
讓元素準備偏移
此時 從視覺上來看它并沒有發(fā)生變化
接下來設置top right bottom或left來讓元素位移
比如top: 20px
意味著元素上邊界與它原本位置的上邊界距離20像素
bottom:20px
則意味著元素下邊界與它原本位置的下邊界距離20 像素
left和right
一個控制左邊界一個控制右邊界 也是同理
這里值得注意的事情有兩點
第一.相對定位的元素沒有脫離文檔流
第二.對非定位元素設置top等方向屬性是沒有效果的
對于第二種需求
讓元素可以在某個祖先級容器范圍內(nèi)任意位置定位
比如像這樣想讓元素相對于某個祖先級元素容器定位
這就意味著元素不被局限在父容器內(nèi)
它可以在更廣闊的空間里放飛自我
浮動是肯定不行的
浮動只能在父容器里作威作福
這就需要一種完全脫離文檔流的定位方式
position:absolute絕對定位
不再區(qū)分這個元素是塊級元素還是行內(nèi)元素
它的父容器會將它視為不存在
就好像設置了display為none一樣
事實上這里設置display都是沒有效果的
然后對它的祖先級元素容器設置標識 postion:relative
讓它可以相對于被標識的元素定位
最后通過top和right設置它在指定容器中的位置
在這個例子里
被絕對定位的元素是沒有設置寬和高的
它脫離了普通文檔流并且不預留任何空間
因此它會按內(nèi)容大小彈性地調整大小
當然也可以為它設置固定的寬高
它會按指定的寬高顯示
不過如果是對于沒有指定寬高的絕對定位元素
同時設置top right bottom和left
這些屬性會同時生效
像這一段代碼
絕對定位元素的top和bottom相等
left和right相等就能在目標容器中實現(xiàn)完美居中
對于第三種需求
讓元素可以在屏幕范圍內(nèi)任意位置定位
比如像這樣
要讓元素保持在頁面右下角在屏幕滾動時不會改變
是以視窗為畫布來定位的
即使頁面上下滾動
它還是會固定在相同的位置
所以為元素設置position:fixed，固定定位
這樣的需求其實和前一個需求是非常類似的
同樣的也會脫離文檔流
只不過一個是相對于某個祖先級元素定位
一個是相對于視窗定位
因此想要讓它顯示出來
需要設置它的寬高和位置
不同的是
并不需要為它設置目標容器
因為它的目標就是頁面的可視部分
現(xiàn)在你可以仔細看看這段CSS代碼
在設置寬高后
設置right指定它 的右邊界到視窗右邊界的距離
再設置bottom指定它的下邊界到視窗下邊界的距離
在頁面滾動后
它相對于視窗仍處于同一位置上
可以說有了定位的這幾種方式
大大的擴展了布局的靈活性
它們分別是
absolute、fixed、relvtive
另外定位還需要一個默認值static
設置它后就能讓元素回到當初
假裝什么都沒發(fā)生的樣子
怎么樣是不是很簡單？
趕緊上手寫點代碼練習一下吧~
入QQ群：717415872? ? ?了解課程動態(tài)、幕后花絮，還有機會參與到課程制作，成為聯(lián)合制作人喲,記得備注來自果凍課堂!
更多內(nèi)容，歡迎加大師姐微信：it_xzy
