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

栏目: Html · 发布时间: 6年前

内容简介：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。但是由于position:fixed存在一定的兼容性问题，而且移动端的视口较多，这个固定究竟是相对于哪个视口，很容易搞错。因此，通常都会使用绝对定位来代替固定定位。下面具体代码举例：HTML代码如下所示：

在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。但是由于position:fixed存在一定的兼容性问题，而且移动端的视口较多，这个固定究竟是相对于哪个视口，很容易搞错。因此，通常都会使用绝对定位来代替固定定位。下面具体代码举例：

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

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

图解互联网金融

史册 / 化学工业出版社 / 2015-1-1 / 39.80元

《图解互联网金融》用“漫画+图解”的形式，为普通人讲述最实用的互联网金融知识。全书从互联网金融的全景、第三方支付、P2P网贷、众筹、互联网销售平台、互联网理财、网络银行、互联网保险八个方面，全面解读了互联网金融的运营模式、发展前景和风险防控等内容。能帮助读者更好地利用互联网金融为自己创造财富。《图解互联网金融》适合对互联网金融感兴趣的读者阅读。一起来看看《图解互联网金融》这本书的介绍吧!

码农工具

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

图解互联网金融

UNIX 时间戳转换

正则表达式在线测试

HSV CMYK 转换工具