-
absolute和fixed查看全部
-
固定層實(shí)現(xiàn)關(guān)鍵查看全部
-
position:fixed;bottom:50px;right:30px; 固定底部查看全部
-
fixed定位 定位形式——絕對(duì)定位 特點(diǎn)——位置固定不變,兄弟元素會(huì)從其下穿過, 未設(shè)置偏移量: 有已定位祖先元素 已祖先元素為基準(zhǔn)定位 無已定位祖先元素 已瀏覽器窗口為基準(zhǔn)定位 設(shè)置偏移量,有、無已定位祖先元素,均已瀏覽器窗口為基準(zhǔn)偏移。 頂部固定層 #top----position:fixed; top:0; left:0; #mainbody----margin-top:(#top高度+原有間距)px查看全部
-
mainbody的margin-top屬性應(yīng)為63px,不是64px。 因?yàn)閠op的border只有bottom一條邊,為1px,top自身height為42px。 所以42+1+20=63px。查看全部
-
任務(wù)1:margin:0 auto; 任務(wù)2:position:fixed;top:0; 任務(wù)3:margin-top:63px;查看全部
-
1.由于給top選擇器設(shè)置fixed固定定位時(shí),(top層已經(jīng)脫離了標(biāo)準(zhǔn)文檔流)沒有對(duì)其設(shè)置偏移量,以其父包裹層定位,(當(dāng)top選擇器fixed固定定位設(shè)置了偏移量時(shí),則top層的位置按照所設(shè)置的偏移量的位置定位),而其父包裹層body的margin與mainbody的上margin值發(fā)生了重疊,(此時(shí)的body與mainbody屬于標(biāo)準(zhǔn)文檔流)mainbody的上margin值大于body的margin值,選擇了mainbody的上margin值20px(標(biāo)準(zhǔn)文檔流中上下margin發(fā)生重疊時(shí)選擇margin值大的那個(gè))所以body下移20px;top層又以body層定位,從而導(dǎo)致了top層與瀏覽器可視窗口產(chǎn)生了距離。為了保持top層與瀏覽器窗口緊挨著,則需對(duì)top層的固定定位設(shè)置偏移量top:0; 2.第一步對(duì)top層設(shè)置偏移量后top層緊隨其后的兄弟元素會(huì)占據(jù)其原來的位置,所以mainbody層上移占據(jù)原來top層的位置。導(dǎo)致原來top層與mainbody層20px的間距沒有了。在mainbody層的上外填充加上一定的高度就可以解決了。查看全部
-
什么時(shí)候該設(shè)置偏移量? 在對(duì)元素設(shè)置固定定位時(shí),如果希望本元素包含起父包含塊中,不需要對(duì)其設(shè)置偏移量。 {position: fixed;}沒有設(shè)置偏移量的方向依然會(huì)保持在父包含塊。 也就是說: 在其沒有設(shè)置偏移量的時(shí)候,偏移量參數(shù)值默認(rèn)為當(dāng)前fixed的元素與瀏覽器可視窗口的偏移數(shù)值! 同理,對(duì)于{position: absolute;}的元素也是一個(gè)道理,沒有設(shè)置的偏移量數(shù)值默認(rèn)為當(dāng)前其相對(duì)與最近的有{position: relative;}的祖先元素的偏移數(shù)值!查看全部
-
absolute與fixed相同點(diǎn) 第一,完全脫離標(biāo)準(zhǔn)文檔流 第二,未設(shè)置偏移量時(shí),都定位在父元素的左上角,“離它最近的父元素” 偏移量————元素設(shè)置定位(絕對(duì)或相對(duì))后 就具有偏移屬性和堆疊屬性(z-index) 2.在沒有設(shè)置定位形式的時(shí)候,它會(huì)在頁面垂直排列的,在左上角顯示 3.在瀏覽器中顯示會(huì)有一個(gè)默認(rèn)的margin 和padding值 不同點(diǎn): absolute 1,會(huì)隨滾動(dòng)條變化 fixed 1,位置固定,不會(huì)隨滾動(dòng)條變化 2,被他遮蓋的元素,可以從其下穿過查看全部
-
固定層效果:實(shí)例:淘寶網(wǎng) 、QQ空間等 掌握基礎(chǔ)知識(shí): 1.position屬性,又稱position定位,有3種形式的定位:靜態(tài)定位、相對(duì)定位、絕對(duì)定位。 影響因素: 1.屬性的取值,2.元素偏移量,3.元素偏移參照基準(zhǔn) position有三種形式的定位:靜態(tài)定位 相對(duì)定位 絕對(duì)定位(absolute fixed) position屬性值:static-靜態(tài)定位, relative-相對(duì)定位,absolute-絕對(duì)定位,fixed-固定定位。 絕對(duì)定位特點(diǎn)【absolute與fixed同屬于絕對(duì)定位】:完全脫離標(biāo)準(zhǔn)文檔流,兄弟元素不再受其影響查看全部
-
fixed定位 定位形式——絕對(duì)定位 特點(diǎn)——位置固定不變,兄弟元素會(huì)從其下穿過, 未設(shè)置偏移量: 有已定位祖先元素 已祖先元素為基準(zhǔn)定位 無已定位祖先元素 已瀏覽器窗口為基準(zhǔn)定位 設(shè)置偏移量,有、無已定位祖先元素,均已瀏覽器窗口為基準(zhǔn)偏移。 頂部固定層 #top----position:fixed; top:0; left:0; #mainbody----margin-top:(#top高度+原有間距)px查看全部
-
mainbody的margin-top屬性應(yīng)為63px,不是64px。 因?yàn)閠op的border只有bottom一條邊,為1px,top自身height為42px。 所以42+1+20=63px。查看全部
-
D div與瀏覽器可視窗口上邊界相距15px查看全部
-
1.由于給top選擇器設(shè)置fixed固定定位時(shí),(top層已經(jīng)脫離了標(biāo)準(zhǔn)文檔流)沒有對(duì)其設(shè)置偏移量,以其父包裹層定位,(當(dāng)top選擇器fixed固定定位設(shè)置了偏移量時(shí),則top層的位置按照所設(shè)置的偏移量的位置定位),而其父包裹層body的margin與mainbody的上margin值發(fā)生了重疊,(此時(shí)的body與mainbody屬于標(biāo)準(zhǔn)文檔流)mainbody的上margin值大于body的margin值,選擇了mainbody的上margin值20px(標(biāo)準(zhǔn)文檔流中上下margin發(fā)生重疊時(shí)選擇margin值大的那個(gè))所以body下移20px;top層又以body層定位,從而導(dǎo)致了top層與瀏覽器可視窗口產(chǎn)生了距離。為了保持top層與瀏覽器窗口緊挨著,則需對(duì)top層的固定定位設(shè)置偏移量top:0; 2.第一步對(duì)top層設(shè)置偏移量后top層緊隨其后的兄弟元素會(huì)占據(jù)其原來的位置,所以mainbody層上移占據(jù)原來top層的位置。導(dǎo)致原來top層與mainbody層20px的間距沒有了。在mainbody層的上外填充加上一定的高度就可以解決了。查看全部
-
什么時(shí)候該設(shè)置偏移量? 在對(duì)元素設(shè)置固定定位時(shí),如果希望本元素包含在其父包含塊中,不需要對(duì)其設(shè)置偏移量。 {position: fixed;}沒有設(shè)置偏移量的方向依然會(huì)保持在父包含塊。 也就是說: 在其沒有設(shè)置偏移量的時(shí)候,偏移量參數(shù)值默認(rèn)為當(dāng)前fixed的元素與瀏覽器可視窗口的偏移數(shù)值! 同理,對(duì)于{position: absolute;}的元素也是一個(gè)道理,沒有設(shè)置的偏移量數(shù)值默認(rèn)為當(dāng)前其相對(duì)于最近的有{position: relative;}的祖先元素的偏移數(shù)值查看全部
舉報(bào)
0/150
提交
取消