在写手机端的时候经常用到tab，tab切换一般都是transition滑动的，如果此时我们用position:fixed定位会发现，元素定位并不是我们想象中的相对浏览器定位，这是因为fixed定位会被拥有transition属性的元素影响。
为了结果这个问题，我们需要将元素变成相对于浏览器定位，这个时候我们就要将这个需要定位的dom元素挂载到根节点下，实现方式如下
1.vue2.0的实现方式
1.1 将某个.vue组件挂载到根节点
import hello from "@/components/HelloWorld.vue";
mounted(){
this.appendCompToRoot(hello);
},
appendCompToRoot(component) {
//component 参数为组件名
var instance = new Vue({
el: document.createElement("div"),
render: h => h(component)
});
document.body.appendChild(instance.$el);
}
1.2 将某个dom元素挂载到根节点
<div class="home">
<h1>home</h1>
<div id="mountDiv" ref="mountDiv">
<img src="logo.png" alt />
</div>
</div>
mounted() {
this.appendDomToRoot(document.querySelector("#mountDiv"), "#container");
},
appendDomToRoot(el, selector) {
//el 为要操作的dom元素，selector为要插入的根节点的选择器，为空的话，直接插入到body中
var container;
if (selector) {
container = document.querySelector(selector);
}
if (!container) {
container = document.body;
}
container.appendChild(el);
},
2.vue3.0的实现方式
只需要将想要dom放入到teleport标签中即可，这个是vue3的新特性，挺好用的
<teleport to="#app">
<div id="mountDiv" ref="mountDiv">
<img src="logo.png" alt />
</div>
</teleport>
