导航栏突发无法点击紧急求助，仅修改过表单、地图及CSS

核心问题分析 #

导航栏无法点击的直接原因是层级覆盖：

• 导航栏未设置z-index，HTML结构中后续的绝对定位元素（如.heading、.food）会默认覆盖在导航栏上方，拦截点击事件
• .heading和.food的定位参数错误，导致元素偏移到导航栏区域，进一步遮挡点击

具体修复步骤 #

1. 提升导航栏层级 #

给nav添加z-index属性，确保它始终处于页面最上层：

nav {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999; /* 添加这行代码 */
}

2. 修正元素定位，避免遮挡导航栏 #

调整.heading和.food的定位方式，让它们在目标区域内居中，不再偏移到导航栏位置：

.heading {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); /* 水平垂直居中 */
    width: 50%;
    text-align: center;
    font-size: 3rem;
    /* 移除margin-top: -400px和margin-left: 650px */
}

.food{
    width: 400px;
    position:absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 水平垂直居中 */
    opacity: 0.4;
    transition: opacity .3s ease;
    background-color: rgba(0,0,0,0.6);
    /* 移除margin-top: -500px和margin-left: 580px */
}

3. 修复不合理的布局参数 #

.content h1的margin-bottom:700px会导致页面布局混乱，改为合理值：

.content h1{
    font-size: 70px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    transition: 0.5s; 
    margin-bottom: 20px; /* 替换原700px的超大边距 */
}

4. 修复表单类名拼写错误（可选） #

HTML中contatform h2的类名拼写错误，应为contactform h2，修正后表单标题样式会正常生效：

.contactform h2 {
    font-size: 30px;
    color: #333;
    font-weight: 500;
}

效果验证 #

完成以上修改后，导航栏会恢复可点击状态，同时页面布局也会更合理，元素不会出现错位遮挡的情况。

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