課程
/前端開發(fā)
/HTML/CSS
/初識(shí)HTML(5)+CSS(3)
絕對定位,相對定位和固定定位有什么區(qū)別,誰可以解釋下,
2015-12-27
源自:初識(shí)HTML(5)+CSS(3) 13-8
正在回答
我從imooc中的作業(yè)中截了三張圖,就是前面三節(jié)設(shè)置的absolute,relative,fixed三種定位。你也可以試試,動(dòng)動(dòng)手在index內(nèi)設(shè)置好后,右側(cè)的效果欄中看看,就能看出區(qū)別。在三個(gè)圖中我也寫了各自的特征和解釋!!
gao634209276
1、絕對定位(position: absolute),對于body或相對體整體進(jìn)行位置的挪動(dòng)
2、相對定位(position: relative)相當(dāng)于人靈魂出竅(可以不受限制),軀體還在(保持的原位置,只不過軀體隱形了)。
3、固定定位(position: fixed)做廣告的技術(shù)呀(一般都在右下角加圖片鏈接)。滾動(dòng)條浮動(dòng),但盒子不懂(這個(gè)相當(dāng)于只有靈魂出來了,不受外界控制)
總結(jié)一下:?1、相對定位不會(huì)失去文檔流中的位置,而絕對定位和固定定位都會(huì)失去原來在文檔流中的位置而被下面的替代;?2、無論是相對、絕對還是固定定位,當(dāng)偏移量超出上面、左邊瀏覽器窗體(或者說超出可視區(qū)域)的時(shí)候,超出的內(nèi)容都會(huì)被隱藏;而超出下面和右邊的時(shí)候,相對定位和固定定位會(huì)隱藏超出的部分內(nèi)容,而絕對定位會(huì)出現(xiàn)滾動(dòng)條。?3、相對、絕對和固定定位都會(huì)浮在正常文檔流的上面,如果遮蓋了正常顯示的文檔流,可以設(shè)置z-index來消除。v
舉報(bào)
HTML(5)+CSS(3)基礎(chǔ)教程8小時(shí)帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽用法和意義
7 回答絕對定位和相對定位的區(qū)別
2 回答固定定位與絕對定位的區(qū)別
3 回答請問絕對定位和固定定位有啥區(qū)別嗎?
1 回答相對定位和絕對定位
6 回答絕對定位和相對定位
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-03-07
我從imooc中的作業(yè)中截了三張圖,就是前面三節(jié)設(shè)置的absolute,relative,fixed三種定位。你也可以試試,動(dòng)動(dòng)手在index內(nèi)設(shè)置好后,右側(cè)的效果欄中看看,就能看出區(qū)別。在三個(gè)圖中我也寫了各自的特征和解釋!!
2015-12-27
1、絕對定位(position: absolute),對于body或相對體整體進(jìn)行位置的挪動(dòng)
2、相對定位(position: relative)相當(dāng)于人靈魂出竅(可以不受限制),軀體還在(保持的原位置,只不過軀體隱形了)。
3、固定定位(position: fixed)做廣告的技術(shù)呀(一般都在右下角加圖片鏈接)。滾動(dòng)條浮動(dòng),但盒子不懂(這個(gè)相當(dāng)于只有靈魂出來了,不受外界控制)
2015-12-27
總結(jié)一下:?
1、相對定位不會(huì)失去文檔流中的位置,而絕對定位和固定定位都會(huì)失去原來在文檔流中的位置而被下面的替代;?
2、無論是相對、絕對還是固定定位,當(dāng)偏移量超出上面、左邊瀏覽器窗體(或者說超出可視區(qū)域)的時(shí)候,超出的內(nèi)容都會(huì)被隱藏;而超出下面和右邊的時(shí)候,相對定位和固定定位會(huì)隱藏超出的部分內(nèi)容,而絕對定位會(huì)出現(xiàn)滾動(dòng)條。?
3、相對、絕對和固定定位都會(huì)浮在正常文檔流的上面,如果遮蓋了正常顯示的文檔流,可以設(shè)置z-index來消除。v