這篇文章主要介紹web開(kāi)發(fā)中移動(dòng)端頁(yè)面頭部固定定位的絕對(duì)定位如何實(shí)現(xiàn),文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供寧波網(wǎng)站建設(shè)、寧波做網(wǎng)站、寧波網(wǎng)站設(shè)計(jì)、寧波網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、寧波企業(yè)網(wǎng)站模板建站服務(wù),十載寧波做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
在移動(dòng)端進(jìn)行開(kāi)發(fā)時(shí),通常整個(gè)頁(yè)面的頭部會(huì)固定一個(gè)區(qū)域,比如下圖淘寶中的頭部。這個(gè)區(qū)域無(wú)論怎么劃屏都是可見(jiàn)的。在PC端,我們可以使用position:fixed來(lái)實(shí)現(xiàn)。但是由于position:fixed存在一定的兼容性問(wèn)題,而且移動(dòng)端的視口較多,這個(gè)固定究竟是相對(duì)于哪個(gè)視口,很容易搞錯(cuò)。因此,通常都會(huì)使用絕對(duì)定位來(lái)代替固定定位。下面具體代碼舉例:
HTML代碼如下所示:
<body> <header class="header-box"> <div class="header-top"> </div> <div class="header-bottom"> </div> </header> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body>
CSS代碼如下所示:
.header-box{ /*position:fixed;*/ position:absolute; left:0; top:0; width:100%; height:179px; background:#ef3229; } ul>li{ height:350px; border-bottom: 1px solid black; }
上面的html中定義了頂部固定區(qū)域和下方內(nèi)容區(qū)域。頂部使用了position進(jìn)行了絕對(duì)定位,設(shè)置了left為0,top為0。內(nèi)容區(qū)域高度超過(guò)了可視區(qū)。
最終得到的效果如下圖所示:
這時(shí)候,會(huì)發(fā)現(xiàn)出現(xiàn)了滾動(dòng)?;瑒?dòng)之后本來(lái)應(yīng)該固定在頂部的區(qū)域又不見(jiàn)了。也就是說(shuō)我們并沒(méi)有實(shí)現(xiàn)我們想要的使用絕對(duì)定位代替固定定位。這是為什么了?這里,我們需要理解兩個(gè)重要知識(shí)點(diǎn):
這里的絕對(duì)定位到底是相對(duì)于誰(shuí)進(jìn)行定位的?
這里的滾動(dòng)條到底是加在誰(shuí)身上?
首先分析第一個(gè)問(wèn)題:我們知道position:absolute是相對(duì)于距離最近的position值不為static的定位祖先元素進(jìn)行定位的,如果沒(méi)有定位的祖先元素,那么就是相對(duì)于根節(jié)點(diǎn)document進(jìn)行定位的。那么,我們的header元素的祖先元素有body,html,document。 其中body,html的默認(rèn)定位都是static。也就是說(shuō),這里最終是相對(duì)于document進(jìn)行定位的。
再分析第二個(gè)問(wèn)題:內(nèi)容超出瀏覽器高度時(shí),滾動(dòng)條到底是加在誰(shuí)身上。事實(shí)上這里應(yīng)該是加在html元素身上的。
理解了上面兩個(gè)知識(shí)點(diǎn),那么我們就可以進(jìn)行分析了。我們知道正是由于html元素身上出現(xiàn)滾動(dòng)條,正是由于滾動(dòng)條的滾動(dòng)才會(huì)導(dǎo)致document超出瀏覽器窗口。因此我們需要首先需要做的是將html的滾動(dòng)條進(jìn)行禁用。
html{ overflow:hidden; }
雖然禁用了html的滾動(dòng)條解決了使用絕對(duì)定位代替固定定位的問(wèn)題,但是帶來(lái)了新的問(wèn)題。那就是整個(gè)頁(yè)面都不再具有滾動(dòng)條了。但是事實(shí)上我們是需要滾動(dòng)條的,因此我們可以在body身上添加滾動(dòng)條。
html{ height:100%; } body{ height:100%; overflow:auto; }
由于需要將body的高度設(shè)置為瀏覽器的高度,而html的高度取決于瀏覽器高度,因此先設(shè)置html高度為瀏覽器高度,然后body繼承自html即可。
因此最終的代碼形式是:
html{ height:100%; overflow:hidden; //禁用滾動(dòng)條,實(shí)現(xiàn)相對(duì)于document的絕對(duì)定位代替固定定位。 } body{ height:100%; overflow:auto; //添加滾動(dòng)條 } ul{ margin-top:179px; list-style: none; } .header-box{ /*position:fixed;*/ position:absolute; left:0; top:0; width:100%; height:179px; background:#ef3229; } ul>li{ height:350px; border-bottom: 1px solid black; }
總結(jié):一些用到的相關(guān)知識(shí):
html元素和body的元素的絕對(duì)定位默認(rèn)值都是static。因此如果有元素找不到非static的祖先元素,那么是相對(duì)于document進(jìn)行定位的。
html元素和body元素都是塊級(jí)元素。默認(rèn)獨(dú)占一行,其寬度等于瀏覽器寬度。高度等于內(nèi)容區(qū)域的高度,如果給高度設(shè)置了height:100%。那么它的高度是瀏覽器高度。
html元素默認(rèn)設(shè)置了overflow:auto。在內(nèi)容超出瀏覽器高度的時(shí)候就會(huì)出現(xiàn)滾動(dòng)條。
以上是web開(kāi)發(fā)中移動(dòng)端頁(yè)面頭部固定定位的絕對(duì)定位如何實(shí)現(xiàn)的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁(yè)題目:web開(kāi)發(fā)中移動(dòng)端頁(yè)面頭部固定定位的絕對(duì)定位如何實(shí)現(xiàn)
分享地址:http://m.rwnh.cn/article0/jgppoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、電子商務(wù)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、面包屑導(dǎo)航、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)