移动端页面头部固定定位的绝对定位实现（代码示例）

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中定义了顶部固定区域和下方内容区域。顶部使用了position进行了绝对定位，设置了left为0，top为0。内容区域高度超过了可视区。

最终得到的效果如下图所示：

理解了上面两个知识点，那么我们就可以进行分析了。我们知道正是由于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。在内容超出浏览器高度的时候就会出现滚动条。

以上就是移动端页面头部固定定位的绝对定位实现（代码示例）的详细内容，更多请关注其它相关文章！