# 莫名抖动的调试过程（完整版） 大家看这个浮动的图片哈 我在切换页面的一瞬间注意看 是不是抖一下 我再切换回来也是 看 那碰到这个问题我们怎么去调呢 因为他就是那一瞬间的事 我们没办法去检查这个元素对吧 所以我们可以这样 先把控制台打开 找到这个 Animations 如果没有呢我们就在这点这 moretools 然后 animations 把它点开之后哈 我们先去到别的页面 然后呢我们把速度调慢再进来 大家看现在是不是慢了 我就可以找一个（合适的）时候给他暂停 暂停之后我就可以检查这个元素了 就是这个 class = box 他现在呢就是 position:fixed 我们都知道 这个 fixed 的是基于浏览器窗口定位的 就是这个 top 200现在应该是 距离浏览器顶部到这为200 那我们把它改成0试试 大家看这个0明显就不是浏览器顶部 而是这个 div 的顶部 为什么这样呢 我们来看一下 position: fixed （的定义） 他最后有一句话说 当元素祖先的这几个属性非空时 容器由视口改为该祖先，也就说 当这个 fixed 的元素 他的父级元素（中）有一个 是这几个属性非空的时候呢 他就会基于那个父极元素去定位 而不是浏览器窗口了 这回我们就不难理解 为什么切换页面他会抖一下 因为切换页面他是有一个动画效果的 我们再把动画加回来 大家看 就是左右滑的这么一个动画效果 所以我们可以推断出来 他应该就是这个动画效果 使用了这个 transform 来实现的 那我们来验证一下哈 我们先来找到这个动画 他用的是 element-ui 里面的 先把这个去掉 好我们再刷新一下 大家看，这回就不会抖了 那如果我们一定要保留这个动画效果 同时呢我们还不想让它抖怎么办呢 我们就要想办法让这个层 就是这个 position: fixed 的这个 这个 div 在dom结构上改变一下 不要放在这个 div 里面了 看一下代码哈 就是这个 div (class-"box") 想办法把它放在body里面 这种需求的话呢 我们就可以考虑封装一个 公用的组件 比如说我们（希望）这样写 InBody 写在 InBody 里面的内容的东西 都会直接被 挂载到 body 那个组件（节点）里面 好那我们来写一下这个组件 其实也很容易 我们先建一个 vue 的文件 在这个目录下哈 那我们就叫 InBody.vue 然后呢我们写一个 vue文件 那这里边呢 我们只需要一个 mounted 的方法 和 destroyed 其他的方法都不要了 然后这里边很简单 一个插槽 然后 mounted 的里面怎么写呢 我们可以通过他的这个方法 拿到他的 dom节点 （我们声明个变量） 我们就叫 node 吧 好，然后呢我们 document.body.appendChild 把这个 node 放进去 好然后呢 destroyed 一样 我们要把它移除掉 node.remove 很简单 好这样这个组件就完事了 那我们可以把这个组件注册到全局 因为这个比较公用 我们先把它导进来啊… 在这吧 components 引爆的有没有 然后呢这个也叫InBody 然后呢我们把它注册到 vue 里 … 他起个名就叫 InBody 然后 InBody OK 然后我们在这块 就可以这样用了 其他的就不用改了 我们重启一下哈 试一下：切换、回来 然后呢也可以浮动 我们检查一下元素 然后找到这个 box 大家看他现在 就在 body 里面 这样就 OK 了 然后以后在这个项目里 想把什么内容直接放到包的元素下边 可以用这个标签包裹起来就可以了 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/mo-ming-dou-dong-de-tiao-shi-guo-cheng-wan-zheng-ban.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.