内容简介：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在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进行了绝对定位。内容区域高度超过了可视区。
最终得到的效果如下图所示：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Vue实战-头部模块编写（5）
- 将 Swift 序列切分为头部和尾部
- IPV4与IPV6的头部PK
- Vue-SSR: head Mixin 实现头部信息管理
- 程序员难逃二八法则，如何晋升为头部 20% 玩家？
- Proxy-Go v10.3 发布，新增 Proxy 私密头部控制参数！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
