在我们的日常开发中，position:fixed这个css属性我想大家肯定都会用到，并且是“信手拈来”的状态，因为咱们都知道它是将视口作为参照物来为指定的元素定位，并且不会随页面的滚动而滚动，而是处于一种固定的状态，对，这很easy
我也是跟大家一样，一直这样使用这个属性的，直到之前做项目时，发现的一个bug，从而让我重新认识了这个属性，废话不多说，下面给大家讲讲这个bug的具体情况吧
正文
这个bug是这样的，我在项目里定义了一个全局的公共组件，用于返回的功能，这个组件使用了position：fixed，用于固定在屏幕的指定位置
按我们之前的了解，这个返回组件在每个页面中，应该是固定在相同的位置，并且不随页面的滚动而滚动，但在实际的测试中，会发现在不同的页面里，这个组件是会处于不同的位置，且还会随页面的滚动而滚动，这就很神奇了！
当时发现这个问题时，我觉得这太神奇了，完全颠覆了我之前对fixed的认知，于是我就在网上查阅相关资料，最后在mdn上发现了问题产生的原因，mdn上是这样描述fixed属性的
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform,perspective或filter属性非none时，容器由视口改为该祖先
关键在于这句话：当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先，因为在我开发的vue项目里，部分页面使用了transtion功能，用于增加页面切换时的过渡效果，因此在部分页面里，返回组件的祖先中就存在 transform为非none的元素,从而使其定位的容器发生了改变，最终导致了bug的产生
结语
这次遇到的问题本身没有难度，但是却因为自己之前学习的局限性，导致了问题，正所谓“学海无涯苦作舟”，看来还得继续努力呀~
