（代码家）移动端头部导航栏的定位

移动端，头部导航还是底部导航栏都是很常见的，而且这是都是封装的组件形式，等于一个人做好骨架之后其他人填写好自己的内容就可以了，

我们要学会的不是自己如何去写一个完美的效果呈现在自己的页面里面，而是如何完美的封装一个灵活的组件由别人引用完美的呈现在别人的组件上面。这才是代码家引以为傲的点。

定位
利用固定定位去写

  position: relative;
  position: absolute;

父级绝对定位，子级固定定位，这样子级就可以脱离元素浮动起来了，
过于简单不解释了，
position:flex;

position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 9;

也是一种定位方式，层级与隐藏
以下是一个底部导航栏借鉴

<template>
  <div class="footer">
    <el-row>
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
      >

        <el-col :span="6">
          <el-menu-item index="/index">
            <i class="iconfont icon-icon-test1"></i>
            <div slot="title">一</div>
          </el-menu-item>
        </el-col>
        <el-col :span="6">
          <el-menu-item index="/indextwo">
            <i class="iconfont icon-icon-test2"></i>
            <div slot="title">二</div>
          </el-menu-item>
        </el-col>
        <el-col :span="6">
          <el-menu-item index="/indexthree">
            <i class="iconfont icon-icon-test"></i>
            <div slot="title">三</div>
          </el-menu-item>
        </el-col>
        <el-col :span="6">
          <el-menu-item index="/indexfour">
            <i class="iconfont icon-icon-test3"></i>
            <div slot="title">四</div>
          </el-menu-item>
        </el-col>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
import './../assets/font_5o8n0ozncyh/iconfont.css'
export default {

}
</script>

<style lang="less" scoped>
// 底部
.footer {
  max-width: 750px;
  min-width: 320px;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  height: 1.306667rem;
  border-top: 1px solid #f2f2f2;
  .el-row {
    width: 100%;
  }
  .el-col {
    font-size: 0.373333rem;
    text-align: center;
    color: #333;
    .el-menu-item {
      height: 0;
      font-size: 0.266667rem;
      margin-top: 0.133333rem;
    }
  }
  .iconfont {
    font-size: 0.666667rem;
    div {
      font-size: 0.32rem;
      color: #bbb;
    }
  }
  .el-tab-pane {
    width: 33.33%;
  }
}
.el-menu-item {
  line-height: 0.54rem;
}
</style>