vue 页面切换fixed定位问题????

<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" >&nbsp;发送</span></a></mt-button>
    </mt-header>
    <div class="new-post-input">
      <mt-field placeholder="请输入标题" v-model="title" style="border-bottom: 1px solid #acacac;"></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: #f6f7f9;
    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)';
  }

我在页面上将某个div定位在底部但是出现在上一个div下面,然后再定位到底部
先出现

图片描述

是渲染时候顺序问题吗?
我该怎么解决?
页面切换我使用history.pushState()

回答:

没有干扰的情况下,以下两行样式正常是固定到底部。
position: fixed;
bottom: 0px;

用f12检查下样式是否被污染,看看是不是被添加了额外的css样式,比如margin-bottom之类,还是样式被覆盖了。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注