移动端页面头部固定定位的绝对定位实现

adie 发布于2019-08-23 14:43 / 3379人阅读

摘要：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。其中的默认定位都是。因此最终的代码形式是禁用滚动条，实现相对于的绝对定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相对于进行定位的。

在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。但是由于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中定义了顶部固定区域和下方内容区域。顶部使用了position进行了绝对定位，设置了left为0，top为0。内容区域高度超过了可视区。
最终得到的效果如下图所示：

这时候，会发现出现了滚动。滑动之后本来应该固定在顶部的区域又不见了。也就是说我们并没有实现我们想要的使用绝对定位代替固定定位。这是为什么了？这里，我们需要理解两个重要知识点：

这里的绝对定位到底是相对于谁进行定位的？

这里的滚动条到底是加在谁身上？

首先分析第一个问题：我们知道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;
            }

总结：一些用到的相关知识：

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

html元素和body元素都是块级元素。默认独占一行，其宽度等于浏览器宽度。高度等于内容区域的高度，如果给高度设置了height:100%。那么它的高度是浏览器高度。

html元素默认设置了overflow:auto。在内容超出浏览器高度的时候就会出现滚动条。

云服务器 GPU云服务器中的绝对定位相对定位-绝对定位绝对定位绝对定位布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101036.html

移动端页面头部固定定位的绝对定位实现

摘要：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。其中的默认定位都是。因此最终的代码形式是禁用滚动条，实现相对于的绝对定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相对于进行定位的。在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。...

terasum 2019-08-30 15:55 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

DesGemini 2019-08-01 17:15 评论0 收藏0
前端必懂之Sticky Footer(粘性页脚)

摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...

piapia 2019-08-02 16:14 评论0 收藏0