CSS相对定位偏移元素后无法点击交互的解决方案

故障原因 #

position: relative搭配top/right/bottom/left做偏移时，元素仅视觉位置发生移动，其在正常文档流中占据的原有空间完全保留。偏移后若与其他元素重叠，层叠等级更高的上层元素会拦截全部鼠标事件，直接导致下层导航的链接无法点击、hover效果无法触发。
另外提供的代码存在HTML结构错误：站点logo的<img>标签被写在<head>标签外、文档合法结构之前，浏览器会自动将该错位元素渲染到页面顶层，是遮挡导航交互的核心诱因。

修复方案 #

• 最小成本修复：提升导航容器层叠等级
  在.main-header-container样式中添加z-index属性，将导航栏抬升至重叠元素上方即可，参考代码：

.main-header-container {
    padding-left: 1rem;
    padding-bottom: 1rem;
    padding-top: 2rem;
    color:rgb(240, 240, 240);
    position:relative;
    top:-30px;
    z-index: 99;
}

• 布局逻辑优化：改用负margin实现上移
  若不需要保留元素原位置的文档流占位，可将top: -30px替换为margin-top: -30px。负margin会带动元素连同其文档流占位一同移动，不会出现视觉位置与实际交互区域分离的问题，从根源上减少无效重叠。
• 基础结构修正
  将写在<head>外部的logo<img>标签移动到<body>内部的对应容器中，修正非法HTML结构，避免浏览器自动校正渲染时产生异常遮挡。

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