为何Hamburger菜单覆盖汉堡图标？Grid布局问题排查

• 修正定位上下文：Grid容器会创建新的布局上下文，若汉堡菜单使用position: absolute，需给汉堡图标的直接父元素或Grid容器添加position: relative，让菜单以此父元素为基准定位，避免相对于页面根元素偏移。
• 调整菜单定位参数：将菜单的top属性设为100%，确保菜单刚好对齐汉堡图标的底部边缘，避免使用固定像素值（易受元素尺寸变化影响）。同时检查是否存在负margin-top，这会导致菜单向上偏移覆盖图标。
• 校准Grid项对齐方式：Grid布局的align-items/justify-items可能影响汉堡图标容器的内部布局，给图标所在的Grid项单独设置align-self: center，保证图标在容器内垂直居中，让top:100%的定位更准确。
• 排查Grid布局的间距影响：Grid的gap属性会增加单元格之间的间距，可能导致图标容器的实际占位尺寸超出预期，进而影响菜单定位。可以暂时移除gap测试，或调整菜单的定位偏移量抵消间距影响。
• 复刻非Grid版本的逻辑：把正常工作的非Grid版本中，汉堡菜单的父元素定位、菜单的显示/隐藏逻辑、内外边距设置完全移植到Grid版本中，对比两者的布局差异，定位Grid布局带来的特殊影响点。

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