Tampermonkey脚本问题：自定义工具栏遮挡原生导航需置于顶部

问题分析 #

你的自定义工具栏使用position: fixed固定在页面顶部，这类元素会脱离文档流，导致页面原有内容（包括原生导航）不会自动向下偏移，从而被工具栏遮挡。同时当前代码未设置box-sizing: border-box，工具栏的padding可能导致宽度超出页面范围。

解决方案 #

1. 修正工具栏样式，添加盒模型属性 #

修改toolbarStyle，新增box-sizing: border-box，确保内边距不会让工具栏宽度溢出页面：

var toolbarStyle = `
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #2ECC71;
    z-index: 9999;
    box-sizing: border-box; /* 新增，避免padding导致宽度超出100% */
`;

2. 给页面主体添加顶部内边距，避开工具栏 #

在创建工具栏后，计算其实际高度，给body设置对应的padding-top，让页面内容自动下移：
修改createToolbar函数，补充以下代码：

function createToolbar() {
    var toolbar = document.createElement('div');
    toolbar.style.cssText = toolbarStyle;

    var buttonEmailAn = document.createElement('button');
    buttonEmailAn.textContent = 'E-Mail An';
    buttonEmailAn.style.cssText = buttonStyle;
    buttonEmailAn.addEventListener('click', emailAnFunction);

    // button 2 + 3（注意：需确保buttonEmailVon和buttonTicketId已定义，否则会报错）
    // toolbar.appendChild(buttonEmailVon);
    // toolbar.appendChild(buttonTicketId);

    toolbar.appendChild(buttonEmailAn);
    document.body.insertBefore(toolbar, document.body.firstChild);

    // 新增：计算工具栏高度，给body添加顶部内边距
    const toolbarHeight = toolbar.offsetHeight;
    document.body.style.paddingTop = `${toolbarHeight}px`;
}

3. （可选）适配原生固定导航 #

如果页面原生导航也使用了position: fixed，可以调整工具栏的z-index值，让原生导航显示在工具栏上方（需根据实际需求选择）：

z-index: 999; /* 设置为比原生导航z-index更低的值 */

验证效果 #

修改后刷新页面，工具栏会固定在顶部，同时页面内容（包括原生导航）会自动下移至工具栏下方，不会被遮挡。

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