.container { width:10vw; height: 10vw; background: rgba(255, 100, 100, .8); } .fixed { position: fixed; top: 1vw; left: 1vw; right: 1vw; bottom: 1vw; background: rgba(100, 100, 255, .8); }
一探position:fixed失效的最终原因通过上面的试验，在最新的 Blink 内核下，发现并不是所有能够生成层叠上下文的元素都会使得position:fixed失效，但也不止transform会使position:fixed失效。
所以，MDN 关于position:fixed的补充描述不够完善。下述 3 种方式目前都会使得position:fixed定位的基准元素改变（本文重点）：
1.transform属性值不为 none 的元素
2.perspective值不为 none 的元素
3.在will-change中指定了任意 CSS 属性
不同内核的不同表现完了吗？没有！我们再看看其他内核下的表现。
上面也谈到了，上述结论是在最新的 Chrome 浏览器下（Blink内核），经过测试发现，在 MAC 下的 Safari 浏览器（WebKit内核，Version 9.1.2 (11601.7.7)）和 IE Trident/ 内核及 Edge 浏览器下，上述三种方式都不会改变position: fixed的表现！
所以，当遇到position: fixed定位基准元素改变的时候，需要具体问题具体分析，多尝试一下，根据需要兼容适配的浏览器作出调整，不能一概而论。
position:fixed的其他问题当然，position: fixed在移动端实现头部、底部模块定位。或者是在position: fixed中使用了 input 也会存在一些问题，这个有很多文章都描述过并且存在很多解决方案，本文不讨论这块问题。
以上就是详解CSS不受控制的position fixed的详细内容，更多关于CSS不受控制的position fixed的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: