<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 ()