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