如何通过Tampermonkey脚本在网页头部添加并定位按钮（解决无法重叠问题）

核心是利用CSS定位属性将按钮固定在头部区域，同时通过层级控制确保按钮不被头部元素遮挡，以下是完整实现脚本和说明：

完整脚本示例（固定在头部右上角） #

// ==UserScript==
// @name         头部嵌入自定义按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在网页头部嵌入自定义按钮
// @author       You
// @match        *://*/*  // 替换为目标网站的URL，比如https://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 1. 创建按钮元素
    const customBtn = document.createElement('button');
    customBtn.textContent = '我的按钮';
    customBtn.id = 'tm-custom-btn';

    // 2. 设置按钮样式（关键：定位与层级）
    customBtn.style.cssText = `
        position: fixed;  /* 固定定位，随页面滚动保持位置 */
        top: 12px;        /* 距离顶部的距离，根据头部高度调整 */
        right: 20px;      /* 距离右侧的距离，适配头部内边距 */
        padding: 8px 16px;
        background: #2563eb;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        z-index: 9999;    /* 层级设为高位，确保不被头部元素遮挡 */
        font-size: 14px;
        transition: background 0.2s;
    `;

    // 3. 添加按钮点击事件（可选）
    customBtn.addEventListener('click', () => {
        alert('按钮被点击了！');
    });

    // 4. 将按钮插入页面
    document.body.appendChild(customBtn);
})();

适配头部容器的嵌入方式（如果头部是相对定位容器） #

如果目标网站的头部容器使用position: relative，可以将按钮直接插入头部内部，避免固定定位可能的偏移问题：

(function() {
    'use strict';

    const customBtn = document.createElement('button');
    customBtn.textContent = '我的按钮';
    customBtn.style.cssText = `
        position: absolute;
        top: 12px;
        right: 20px;
        padding: 8px 16px;
        background: #2563eb;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        z-index: 10;  /* 只需比头部内部元素层级高即可 */
        font-size: 14px;
    `;

    // 找到头部容器（需替换为目标网站的头部选择器，比如.header、#header等）
    const header = document.querySelector('header');
    if (header) {
        header.appendChild(customBtn);
    }
})();

关键注意事项 #

• 调整定位参数：根据目标网站头部的高度、内边距，修改top、right等值，确保按钮嵌入位置贴合头部
• 层级控制：如果按钮被头部元素遮挡，逐步提高z-index的值（比如10000、99999）
• 选择器适配：替换document.querySelector('header')中的选择器为目标网站头部的实际CSS选择器（可通过浏览器开发者工具查看）

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