为什么汉堡菜单会超出wrapper容器且与调试工具显示不一致

• 定位基准差异：你当前给.hamburger_wrapper设置了position: fixed，fixed定位默认相对于浏览器视口计算位置，不会跟随父级容器.wrapper的边界对齐。.wrapper通常设置了固定最大宽度+左右margin:auto实现居中，当浏览器视口宽度大于.wrapper的最大宽度时，right: 60px是相对于视口右边缘计算，自然会超出.wrapper的范围。
• 调试工具显示差异：打开开发者工具时，工具通常会停靠在浏览器侧边/底部，会压缩视口的实际宽度，此时视口宽度刚好小于等于.wrapper的最大宽度，.wrapper会占满整个视口宽度，所以fixed定位的汉堡菜单刚好落在.wrapper范围内，才会出现两种场景显示不一致的情况。
• 额外影响因素：不同场景下页面滚动条是否展示，会导致视口可用宽度计算有差异，也会放大fixed定位的偏移问题。

可根据业务需求选择以下两种方案：

方案1：调整结构+相对定位（适配性最强，推荐） #

1. 调整HTML结构，把.hamburger_wrapper从header的直接子级，挪到.wrapper内部，和.logo、.menu_reg_block同级：

<header>
    <div class="wrapper">
        <!-- 汉堡菜单挪到wrapper内部 -->
        <div class="hamburger_wrapper">
            <div class="hamburger hamburger--spin">
                <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                </div>
            </div>
        </div>
        <div class="logo">
            <h2>Frispes.</h2>
        </div>
        <div class="menu_reg_block">
            <!-- 原有导航代码保持不变 -->
        </div>
    </div>
</header>

2. 修改CSS，给.wrapper添加相对定位作为定位基准，把汉堡菜单的fixed改为absolute：

/* 给wrapper加相对定位作为定位基准 */
.wrapper {
  position: relative;
  /* 保留你原有的wrapper样式，比如max-width、margin:auto等 */
}

@media screen and (max-width: 1200px) {
   .hamburger_wrapper {
    display: block;
    /* 把fixed改成absolute，相对于wrapper定位 */
    position: absolute;
    right: 60px;
    top: 50%; /* 可选，实现垂直居中 */
    transform: translateY(-50%); /* 可选，配合top实现垂直居中 */
    cursor: pointer;
    z-index: 1000;
  }
}

方案2：保留fixed定位，动态计算right值（适合需要汉堡菜单滚动时固定在顶部的场景） #

如果需要汉堡菜单始终固定在视口顶部不随滚动消失，不用修改HTML结构，直接修改CSS的right值即可（假设你的.wrapper最大宽度为1200px，按实际值替换即可）：

@media screen and (max-width: 1200px) {
   .hamburger_wrapper {
    display: block;
    position: fixed;
    /* 计算逻辑：视口总宽度减去wrapper宽度，剩下的宽度平分到左右，加上你需要的右内边距60px */
    right: calc((100vw - 1200px) / 2 + 60px);
    cursor: pointer;
    z-index: 1000;
  }
}
/* 可选：给html设置固定滚动条宽度，避免滚动条显隐导致的偏移 */
html {
  scrollbar-gutter: stable;
}

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