行動端頁面頭部固定定位的絕對定位實作（程式碼範例）

這篇文章帶給大家的內容是關於行動端頁頭部固定定位的絕對定位實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在行動端進行開發時，通常整個頁面的頭部會固定一個區域，例如下圖淘寶中的頭部。這個區域無論怎麼劃屏都是可見的。在PC端，我們可以使用position:fixed來實作。但是由於position:fixed存在一定的相容性問題，而且行動端的視口較多，這個固定究竟是相對於哪個視口，很容易搞錯。因此，通常都會使用絕對定位來取代固定定位。下面具體程式碼範例：

HTML程式碼如下所示：

        <header>
            <div>
                
            </div>
            <div>
                
            </div>
        </header>
        

                
•                 
•                 
•                 
•                 
•                 
•                 
•                 
•             

    

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中定義了頂部固定區域和下方內容區域。頂部使用了position進行了絕對定位，設定了left為0，top為0。內容區域高度超過了可視區。

最終得到的效果如下圖所示：

#這時候，會發現出現了滾動。滑動之後本來應該固定在頂部的區域又不見了。也就是說我們並沒有實現我們想要的使用絕對定位來取代固定定位。這是為什麼了？ 這裡，我們需要理解兩個重要知識點：

1. 這裡的絕對定位到底是相對於誰進行定位的？

2. 這裡的滾動條到底是加在誰身上？

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

再分析第二個問題：內容超出瀏覽器高度時，滾動條到底是加在誰身上。事實上這裡應該是加在html元素身上的。
了解上面兩個知識點，那麼我們就可以進行分析了。我們知道正是由於html元素身上出現捲軸，正是由於捲軸的滾動才會導致document超出瀏覽器視窗。因此我們需要首先需要做的是將html的捲軸進行停用。

html{
  overflow:hidden;
}

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

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

因為需要將body的高度設定為瀏覽器的高度，而html的高度又取決於瀏覽器高度，因此先設定html高度為瀏覽器高度，然後body繼承自html即可。

因此最終的程式碼形式是：

            html{
                height:100%;
                overflow:hidden;  //禁用滚动条，实现相对于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;
            }

總結：一些用到的相關知識：

1. html元素和body的元素的絕對定位預設值都是static。因此如果有元素找不到非static的祖先元素，那麼是相對於document進行定位的。

2. html元素和body元素都是區塊級元素。預設獨佔一行，其寬度等於瀏覽器寬度。高度等於內容區域的高度，如果給高度設定了height:100%。那麼它的高度就是瀏覽器高度。

3. html元素預設設定了overflow:auto。在內容超出瀏覽器高度的時候就會出現捲軸。

#

以上是行動端頁面頭部固定定位的絕對定位實作（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！