Vue page switching fixed positioning problem?

<template>
  <div style="height: 100%;">
    <mt-header title="">
      <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: "Post"}"></mt-button>
      <mt-button icon="add" slot="right"><a @click="addQuestion()"><span class="fa fa-send" ></span></a></mt-button>
    </mt-header>
    <div class="new-post-input">
      <mt-field placeholder="" v-model="title" style="border-bottom: 1px solid -sharpacacac;"></mt-field>
      <mt-field placeholder="" type="textarea" v-model="content" rows="14"></mt-field>
    </div>

    <div>
      :
      <mt-badge class="new-at-who" size="small" :type="item.type" v-for="item in atCheckList" :key="item.id">{{item.name}}</mt-badge>
    </div>
    <div>
      :
      <mt-badge class="new-at-who" size="small" :type="item.type" v-for="item in topicCheckList" :key="item.id">{{item.name}}</mt-badge>
    </div>

    <div class="new-post-select">
      <div class="select-items">
      <a class="select-item"><span class="fa fa-image new-post-btn"><input type="file" @change="selectFile()" class="new-post-file" /></span></a>
      <a v-tap="{methods: switchView, view: "AtWho"}" class="select-item"><span class="fa fa-at"></span></a>
      <a v-tap="{methods: switchView, view: "Topic"}" class="select-item"><span class="fa fa-flag"></span></a>
      </div>
    </div>
  </div>
</template>


css:

 .new-post-select {
    float: right;
    height: 40px;
    width: 100%;
    background-color: -sharpf6f7f9;
    position: fixed;
    bottom: 0px;
  }
  .select-items{
    float: right;
    margin-top: 10px;
  }
  .select-item{
    font-size: 16px;
    margin-left: 17px;
    margin-right: 15px;
  }
  .new-post-btn{
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .new-post-btn input{
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
  }

I position a div on the page at the bottom but appear under the previous div, and then navigate to the bottom

Is

a problem with the order of rendering?
what should I do about it?
Page switching I use history.pushState ()

Feb.27,2021

the following two line styles are normally fixed to the bottom without interference.
position: fixed;
bottom: 0px;

check with F12 to see if the style is contaminated to see if additional css styles, such as margin-bottom, have been added, or if the style has been overwritten.

Menu