課程
/前端開發
/HTML/CSS
/初識HTML(5)+CSS(3)-升級版
三個定位有什么區別
2018-06-11
源自:初識HTML(5)+CSS(3)-升級版 13-5
正在回答
position:absolute(父相子絕,父元素設置了相對定位或者絕對定位的時候,元素會相當于離自己最近的設置了相對定位或絕對定位的元素而定位,就近法則,如果沒有設置,元素就相當于根元素(html)來定位)脫離文檔流
position:relative(定位是相對于自身位置而定位) 未脫離文檔流
position:fixed(fixed固定定位是相對于瀏覽器本身視口定位,同樣有absolute的塊狀化、脫離文檔流等特點,除了參照物不同,其它基本相同)
1、position:absolute(表示絕對定位),這條語句的作用將元素從文檔流中拖出來,然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。
2、position:relative(表示相對定位),它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
3、position:fixed(表示固定定位),與absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響
position:relative 相對于自己原來的位置,偏移某個距離,原來的位置會被保留。
position:absolute 相對于距離他最近的,已定位的祖先元素來定位,若沒有,會相對于body來定位,會變為塊級元素,會脫離文檔流(不占據頁面空間)。
position:fixed 相對于body固定定位,會脫離文檔流
不對吧,position:absolute是相對于當前元素的父元素而言的,如果沒有父元素,就以body為基準
層模型有三種形式:1、絕對定位(position:absolute)2、相對定位(position:relative)3、固定定位(position:fixed)?
用通俗的話來說:(個人觀點?。?br />position:absolute,簡單來說,就是相對于瀏覽器窗口的定位。沒有參考物,或者說參考的是瀏覽器本身。postion:relative, 簡單來說,就是相對于關聯物(參考物)來定位,相對于參考物的相對位置。position:fixed,固定在一個位置,不會流動。也就是浮動在窗口的固定位置上。有點像廣告飄窗。
慕絲6441581
舉報
HTML(5)+CSS(3)基礎教程8小時帶領大家步步深入學習標簽用法和意義
2 回答定位和浮動模型層模型有什么區別??
1 回答層模型的定位區別
3 回答層模型中相對定位和絕對定位區別
1 回答層模型的區別
2 回答層模型--固定定位
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2020-09-23
position:absolute(父相子絕,父元素設置了相對定位或者絕對定位的時候,元素會相當于離自己最近的設置了相對定位或絕對定位的元素而定位,就近法則,如果沒有設置,元素就相當于根元素(html)來定位)脫離文檔流
position:relative(定位是相對于自身位置而定位) 未脫離文檔流
position:fixed(fixed固定定位是相對于瀏覽器本身視口定位,同樣有absolute的塊狀化、脫離文檔流等特點,除了參照物不同,其它基本相同)
2019-03-03
1、position:absolute(表示絕對定位),這條語句的作用將元素從文檔流中拖出來,然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。
2、position:relative(表示相對定位),它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
3、position:fixed(表示固定定位),與absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響
2018-11-15
position:relative 相對于自己原來的位置,偏移某個距離,原來的位置會被保留。
position:absolute 相對于距離他最近的,已定位的祖先元素來定位,若沒有,會相對于body來定位,會變為塊級元素,會脫離文檔流(不占據頁面空間)。
position:fixed 相對于body固定定位,會脫離文檔流
2018-08-23
不對吧,position:absolute是相對于當前元素的父元素而言的,如果沒有父元素,就以body為基準
2018-06-11
層模型有三種形式:1、絕對定位(position:absolute)2、相對定位(position:relative)3、固定定位(position:fixed)?
用通俗的話來說:(個人觀點?。?br />position:absolute,簡單來說,就是相對于瀏覽器窗口的定位。沒有參考物,或者說參考的是瀏覽器本身。
postion:relative, 簡單來說,就是相對于關聯物(參考物)來定位,相對于參考物的相對位置。
position:fixed,固定在一個位置,不會流動。也就是浮動在窗口的固定位置上。有點像廣告飄窗。