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

51次阅读

共计 611 个字符，预计需要花费 2 分钟才能阅读完成。

在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在 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 进行了绝对定位。内容区域高度超过了可视区。最终得到的效果如下图所示：

正文完