新增CSS后表单提交按钮与Create account链接无法点击问题求助

问题根因 #

两个点击失效问题的原因一致：你代码中.main容器内的<header>标签（承载顶部背景图的元素）设置了margin-top: -20px和z-index: 1，该元素层级高于上方的顶部导航栏区域，实际已经覆盖在了搜索提交按钮、Create account链接的上方，你点击时触发的是这个背景层，自然无法操作下层的元素。

修复方案 #

以下两种方案二选一即可：

1. 降低背景图元素的层级，修改原有header的CSS样式：

header {
    background: url(images/headerWallpaper.jpg) center center;
    width: 100%;
    height: 750px;
    margin-top: -20px;
    position: relative;
    z-index: -1; /* 把原有z-index:1修改为-1即可 */
}

2. 给顶部深色导航栏设置更高层级，新增如下CSS规则：

.header {
    position: relative;
    z-index: 2;
}

额外优化建议 #

你目前顶部导航用的是固定边距、偏移量的布局方式，在不同尺寸的屏幕下会出现元素错位、溢出的问题，后续可以替换为Flex布局做顶部导航的排列，适配性会好很多。

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