如何使用position:absolute;实现固定定位？

2017-10-16

前言

移动端对position:fixed 支持不良好，如何使用position:absolute 实现固定定位？

首先，实现固定定位，需要两个元素：一个是固定的元素（如固定导航栏），这里称元素A；另一个即相对于固定导航栏滚动的元素,这里称元素B 。

元素A绝对定位，如何是顶部固定,则设置top为顶部固定栏的高度，否则会挡住元素A头部内容。

元素B绝对定位，如何是顶部固定，则设置top：0。

顶部固定导航栏

   A {
          position: absolute;
          width: 100%;
          top: 100px;
          bottom: 0;
          overflow-x: hidden;
          overflow-y: auto;
          left: 0;
          right: 0;
          margin: auto;
      }
B {
          position: absolute;
          width: 100%;
          top: 0;
          min-height: 100px;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 999;
      }

底部固定导航栏

A {
           position: absolute;
           width: 100%;
           bottom: 100px;
           top: 0;
           overflow-x: hidden;
           overflow-y: auto;
           left: 0;
           right: 0;
           margin: auto;
       }
	B {
           position: absolute;
           width: 100%;
           bottom: 0;
           min-height: 100px;
           left: 0;
           right: 0;
           margin: auto;
           z-index: 999;
       }