固定定位（fixed）按钮动态移动的实现原理咨询

这个效果的核心是fixed定位的参考上下文被修改了——你默认认为fixed是相对于浏览器视口，但实际上当父元素存在transform、perspective或filter属性时，fixed定位会切换为相对于这个父元素，而非视口。

具体到这个场景：

• 右侧设置按钮的父容器（面板的外层包裹元素）在收起状态下，应该是通过transform: translateX(100%)把整个面板移出了视口右侧；点击展开时，这个transform值被改为translateX(0)（或类似偏移值），让面板滑入视口。
• 因为按钮的父容器设置了transform，按钮的fixed定位就不再参考视口，而是参考这个父容器。所以按钮的right: 0是相对于父容器的右侧，而非浏览器视口的右侧。当父容器从右侧滑入时，按钮自然会跟着容器一起移动，不会被面板覆盖。

验证这个逻辑很简单：

• 在开发者工具里找到按钮的直接父级或上级容器，对比面板展开/收起时的样式，能看到transform属性的变化。
• 临时移除父容器的transform属性，按钮会立刻固定到视口最右侧，不再随面板移动，就能确认这个机制。

内容的提问来源于stack exchange，提问作者Ole