小技巧处理 fixed 定位后其它内容被覆盖的问题

<div :class="classList">
  <div class="i-nav-bar__inner">
    <div class="i-nav-bar__left" @click="handleClickLeft">
      <slot name="left">
        <i class="i-nav-bar__arrow fa fa-fw fa-angle-left" v-if="leftArrow"></i>
        <span class="i-nav-bar__text" v-if="leftText">{{ leftText }}</span>
      </slot>
    </div>
    <div class="i-nav-bar__title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="i-nav-bar__right" @click="handleClickRight">
      <slot name="right"></slot>
    </div>
  </div>
</div>

export default {
  name: 'INavBar',
  props: {
    title: String,
    leftArrow: Boolean,
    leftText: String,
    fixed: Boolean
  },
  computed: {
    classList() {
      return [
        'i-nav-bar',
        {
          'i-nav-bar--fixed': this.fixed
        }
      ]
    }
  },
  methods: {
    handleClickLeft(ev) {
      this.$emit('click-left', ev)
    },
    handleClickRight(ev) {
      this.$emit('click-right', ev)
    }
  }
}

$height: 50px;

.i-nav-bar {
  height: $height;
  &__inner {
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
    height: $height;
    background-color: #fff;
    color: #4a4d5a;
  }
  &__left {
    height: 100%;
    position: absolute;
    top: 0;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:active {
      opacity: 0.5;
    }
    .i-nav-bar__arrow {
      font-size: 25px;
      margin-top: -1px;
    }
    .i-nav-bar__text {
      font-size: 14px;
      margin-left: -6px;
    }
  }
  &__title {
    max-width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 16px;
    color: #34495e;
  }
  &__right {
    height: 100%;
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:active {
      opacity: 0.5;
    }
  }
  &--fixed {
    .i-nav-bar__inner {
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}