Monica AI在网页右下角提供的工具箱，本质上是一个注入到页面文档中的悬浮容器。它的默认定位方式通常跟随文档流或者使用绝对定位，因此当你滚动页面时，工具箱可能会随着内容移动，甚至滚出可视区域。要实现真正的固定，需要理解浏览器中定位机制的区别。绝对定位的元素会相对于最近的已定位祖先元素进行偏移，如果没有这样的祖先，则相对于初始包含块。而固定定位的元素则相对于浏览器视口定位，不随页面滚动而移动。这就是固定工具箱的核心原理，把容器的 position 属性从 absolute 改为 fixed，并设置合适的 bottom 和 right 偏移量。不过 Monica AI 的界面结构可能会被包裹在 Shadow DOM 中，直接修改全局样式不一定能穿透进去，这也是很多人尝试简单 CSS 覆盖却无效的原因。
一、工具箱固定需要处理的定位与层级问题
先看工具箱默认状态下的表现。它通常被插入在 body 末尾，使用较高的 z-index 以覆盖页面内容。如果它使用绝对定位，当页面高度超过一屏时，向下滚动就会让它离开视口。要让工具箱始终停留在右下角，可以把它的 CSS 定位改为 fixed，同时保持原来的 bottom 和 right 值。比如默认样式可能是 position: absolute; bottom: 20px; right: 20px;，只需要把 absolute 改成 fixed 就能实现视口固定。但事情没有这么简单，Monica AI 的扩展样式可能带有更复杂的选择器，或者通过内联样式动态计算位置。此时可以使用浏览器开发者工具检查实际生效的样式，找到对应容器的类名或属性。
固定之后还需要注意两点。一是 z-index 的竞争关系，如果页面中有其他固定定位元素，例如在线客服按钮、回到顶部按钮，它们可能和 Monica AI 工具箱互相遮挡。二是移动端或窄屏下的适应性问题，固定定位可能导致工具箱超出视口边界，需要配合媒体查询调整偏移量。你可以在扩展自身的设置面板中寻找相关选项，部分版本提供一键固定的开关。如果没有，再考虑通过外部样式或脚本强制覆盖。
下面是一段针对常见 DOM 结构的 CSS 修复示例，假设工具箱容器带有 data-monica-toolbox 属性。这段代码需要注入到页面上下文中才能生效，不能直接写在扩展的样式文件里。
/* 将 Monica AI 右下角工具箱固定到视口 */
[data-monica-toolbox] {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 2147483000;
}
@media (max-width: 768px) {
[data-monica-toolbox] {
bottom: 10px;
right: 10px;
}
}如果实际页面中找不到这个属性，可以打开开发者工具，在元素面板里逐层展开工具箱节点，复制它最外层元素的 class 或 id，替换选择器即可。固定完成后，还需要观察滚动时工具箱是否稳定，不与浏览器的下载提示条或视频全屏控件发生重叠。
二、通过扩展设置与开发者工具完成位置锁定
Monica AI 的官方扩展在部分版本中提供了工具箱位置记忆功能。点击浏览器工具栏中的 Monica AI 图标，进入扩展设置页面，找到界面或悬浮球相关选项。如果存在位置锁定或固定开关，直接开启即可。这种方式最为稳妥，不需要手动写入样式，也不会因为扩展更新而频繁失效。设置完成后刷新页面，工具箱应该会保持在新位置。如果没有相关选项，可以尝试拖拽工具箱本身，有些实现允许用户直接拖动悬浮球，松开鼠标后自动保存坐标。
当官方设置无法满足要求时，可以使用浏览器开发者工具临时验证 CSS 修改效果。打开控制台，在 Elements 面板中选中工具箱节点，右侧 Styles 面板里找到对应的定位规则，手动修改 position 值查看实时变化。验证有效后，再把样式固化到用户脚本或油猴扩展中。需要注意的是，开发者工具中的修改只在当前页面生命周期内有效，刷新后就会还原，所以只能作为调试手段。
对于经常使用多个网站的开发者，可以编写一个通用的油猴脚本，在页面加载完成后注入样式。下面是一个基础示例，它利用 MutationObserver 监听 DOM 变化，确保工具箱节点出现后立刻应用固定样式。
// ==UserScript==
// @name Monica AI Toolbox Fixed
// @namespace local
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
const style = document.createElement('style');
style.textContent = `
[data-monica-toolbox] {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
}
`;
document.head.appendChild(style);
})();这段脚本假设工具箱外层元素带有 data-monica-toolbox 属性，你可以根据实际 DOM 结构调整选择器。使用 !important 是为了提高优先级，防止被扩展自身的行内样式覆盖。如果你的浏览器支持 Shadow DOM，可能还需要通过 chrome.scripting 的 CSS 插入功能或者更深层的样式穿透方案，不过普通油猴脚本在页面主文档中注入的样式对 Shadow DOM 通常无效，需要额外处理。
三、调整工具排序的两种实现路径
工具排序比固定位置更依赖内部结构。Monica AI 工具箱中的每个功能按钮可能以列表项的形式存在，例如翻译、总结、写作、搜索等。如果扩展本身提供了拖拽排序功能，最直接的方式就是打开工具箱的设置菜单，找到工具管理或排序入口，按住某个工具拖动到目标位置。这种操作通常会保存到浏览器本地存储，下次打开页面时自动恢复。
如果扩展没有提供排序界面，就需要通过操作 DOM 来调整顺序。一种做法是在页面加载后获取工具箱容器中的所有子节点，根据自定义的优先级重新排列。下面这个示例演示如何按工具名称的优先级数组调整按钮顺序。代码中避免了直接使用尖括号字符，只操作现有的 DOM 节点。
// 按照自定义优先级重新排列工具箱中的按钮
function reorderToolboxButtons(containerSelector, orderList) {
const container = document.querySelector(containerSelector);
if (!container) return;
const buttons = Array.from(container.children);
const sorted = buttons.slice().sort((a, b) => {
const nameA = (a.textContent || '').trim();
const nameB = (b.textContent || '').trim();
const indexA = orderList.indexOf(nameA);
const indexB = orderList.indexOf(nameB);
if (indexA === -1) return 1;
if (indexB === -1) return -1;
return indexA - indexB;
});
sorted.forEach(btn => container.appendChild(btn));
}
// 使用示例：把写作和总结放在前面
reorderToolboxButtons('[data-monica-toolbox]', ['写作', '总结', '翻译', '搜索']);这个方法的优点是简单直接，缺点是依赖按钮的文本内容，如果扩展更新后文案改变，排序就会失效。另外如果工具箱使用了虚拟滚动或按需渲染，部分按钮可能尚未插入 DOM，此时需要在合适的时机重新执行排序函数。可以结合 MutationObserver 监听容器的子节点变化，每次变化后自动调用排序逻辑。
另一种路径是使用 CSS 的 order 属性。如果工具箱容器是 Flex 布局，子元素默认按 DOM 顺序排列，但可以通过设置不同按钮的 order 值改变视觉顺序，而无需移动 DOM 节点。这样做的好处是不影响事件监听和其他脚本逻辑，但需要为每个按钮指定独立的选择器或使用伪类。对于结构多变的第三方扩展来说，维护成本较高，不如直接修改 DOM 来得直观。
四、脚本注入后的稳定性与常见问题排查
无论是固定位置还是调整排序，只要使用脚本注入方式，就需要注意几个常见问题。首先是扩展更新导致选择器失效。Monica AI 在版本迭代中可能会修改类名、属性名或 DOM 结构，原先的脚本可能突然不起作用。此时需要重新打开开发者工具检查新的节点结构，更新选择器。建议把脚本中的选择器集中定义为常量，方便后期维护。
其次是页面动态加载和单页应用路由切换的影响。很多现代网站使用前端框架，路由切换时不会刷新整个页面，但 DOM 会被重新渲染。Monica AI 工具箱可能跟随页面上下文重新注入，导致固定样式和排序操作丢失。解决方案是持续监听 DOM 变化，一旦发现目标容器重新出现，就重新应用样式和排序。下面是一个更健壮的脚本框架，使用 MutationObserver 处理动态变化。
// 动态监听并保持 Monica AI 工具箱的固定与排序
const observer = new MutationObserver(() => {
const toolbox = document.querySelector('[data-monica-toolbox]');
if (!toolbox) return;
// 应用固定定位
toolbox.style.position = 'fixed';
toolbox.style.bottom = '20px';
toolbox.style.right = '20px';
// 执行自定义排序
const orderList = ['写作', '总结', '翻译', '搜索'];
Array.from(toolbox.children)
.sort((a, b) => {
const ia = orderList.indexOf((a.textContent || '').trim());
const ib = orderList.indexOf((b.textContent || '').trim());
return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
})
.forEach(btn => toolbox.appendChild(btn));
});
observer.observe(document.body, { childList: true, subtree: true });最后还要注意安全性和合规性。油猴脚本只对本地浏览器生效，不会影响其他用户。但如果是在公司内网或共享设备上使用，需要确认是否违反内部安全策略。此外，不要将带有个人配置的脚本发布到公开平台，避免泄露使用习惯或设备信息。排查问题时，可以先在无痕模式下禁用所有其他扩展，只保留 Monica AI 和油猴脚本，确认问题是否由样式冲突或脚本优先级引起。通过逐步排除，基本可以定位到具体原因，并做出相应的调整。