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