移動端頁面頭部固定定位的絕對定位實現(xiàn)

terasum 發(fā)布于2019-08-30 15:55 / 1914人閱讀

摘要：在移動端進行開發(fā)時，通常整個頁面的頭部會固定一個區(qū)域，比如下圖淘寶中的頭部。其中的默認定位都是。因此最終的代碼形式是禁用滾動條，實現(xiàn)相對于的絕對定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相對于進行定位的。

在移動端進行開發(fā)時，通常整個頁面的頭部會固定一個區(qū)域，比如下圖淘寶中的頭部。這個區(qū)域無論怎么劃屏都是可見的。在PC端，我們可以使用position:fixed來實現(xiàn)。但是由于position:fixed存在一定的兼容性問題，而且移動端的視口較多，這個固定究竟是相對于哪個視口，很容易搞錯。因此，通常都會使用絕對定位來代替固定定位。下面具體代碼舉例：

HTML代碼如下所示：

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進行了絕對定位，設(shè)置了left為0，top為0。內(nèi)容區(qū)域高度超過了可視區(qū)。
最終得到的效果如下圖所示：

這時候，會發(fā)現(xiàn)出現(xiàn)了滾動。滑動之后本來應(yīng)該固定在頂部的區(qū)域又不見了。也就是說我們并沒有實現(xiàn)我們想要的使用絕對定位代替固定定位。這是為什么了？這里，我們需要理解兩個重要知識點：

這里的絕對定位到底是相對于誰進行定位的？

這里的滾動條到底是加在誰身上？

首先分析第一個問題：我們知道position:absolute是相對于距離最近的position值不為static的定位祖先元素進行定位的，如果沒有定位的祖先元素，那么就是相對于根節(jié)點document進行定位的。那么，我們的header元素的祖先元素有body,html,document。其中body,html的默認定位都是static。也就是說，這里最終是相對于document進行定位的。

再分析第二個問題：內(nèi)容超出瀏覽器高度時，滾動條到底是加在誰身上。事實上這里應(yīng)該是加在html元素身上的。
理解了上面兩個知識點，那么我們就可以進行分析了。我們知道正是由于html元素身上出現(xiàn)滾動條，正是由于滾動條的滾動才會導(dǎo)致document超出瀏覽器窗口。因此我們需要首先需要做的是將html的滾動條進行禁用。

html{
  overflow:hidden;
}

雖然禁用了html的滾動條解決了使用絕對定位代替固定定位的問題，但是帶來了新的問題。那就是整個頁面都不再具有滾動條了。但是事實上我們是需要滾動條的，因此我們可以在body身上添加滾動條。

html{
    height:100%;
}
body{
    height:100%;
    overflow:auto;
}

由于需要將body的高度設(shè)置為瀏覽器的高度，而html的高度取決于瀏覽器高度，因此先設(shè)置html高度為瀏覽器高度，然后body繼承自html即可。

因此最終的代碼形式是：

            html{
                height:100%;
                overflow:hidden;  //禁用滾動條，實現(xiàn)相對于document的絕對定位代替固定定位。
            }
            body{
                
                height:100%;
                overflow:auto;   //添加滾動條
            }
            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)知識：

html元素和body的元素的絕對定位默認值都是static。因此如果有元素找不到非static的祖先元素，那么是相對于document進行定位的。

html元素和body元素都是塊級元素。默認獨占一行，其寬度等于瀏覽器寬度。高度等于內(nèi)容區(qū)域的高度，如果給高度設(shè)置了height:100%。那么它的高度是瀏覽器高度。

html元素默認設(shè)置了overflow:auto。在內(nèi)容超出瀏覽器高度的時候就會出現(xiàn)滾動條。

云服務(wù)器 GPU云服務(wù)器中的絕對定位相對定位-絕對定位絕對定位絕對定位布局

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117248.html

發(fā)表評論

登陸后可評論

0條評論

terasum

男|高級講師

我要關(guān)注我要私信

TA的文章

CDN加速哪家好？企業(yè)該如何選擇？

閱讀 2446·2021-11-22 13:53
虛擬云主機怎么建站-虛擬主機和云主機改如何選擇？

閱讀 1140·2021-09-22 16:06
??測試十年朋友已實現(xiàn)財富自由，而自己每天艱難度日....

閱讀 1381·2021-09-02 15:21
移動端頁面頭部固定定位的絕對定位實現(xiàn)

閱讀 1915·2019-08-30 15:55
<<CSS揭秘>>：自適應(yīng)的橢圓

閱讀 3132·2019-08-29 11:19
【每日一包0012】to-camel-case,to-no-case,to-space-case

閱讀 1932·2019-08-26 13:23
React組件拆分之道

閱讀 948·2019-08-23 18:23
Vue 服務(wù)端渲染實踐 ——Web應(yīng)用首屏耗時最優(yōu)化方案

閱讀 1767·2019-08-23 16:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

移動端頁面頭部固定定位的絕對定位實現(xiàn)

相關(guān)文章