导航栏<a>标签链接无法点击或选中文本问题求助

我一眼就揪出问题所在啦——你页面里的#overlay元素就是挡路的“元凶”！

先看你的CSS代码：

#overlay{
  font-family: Oswald;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: 700;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

这个元素设置了position: absolute，还把top/bottom/left/right全设为0，意味着它会铺满整个浏览器视口，包括你的导航栏区域。虽然它看起来只是在页面中间显示文字，但它的可点击区域是整个页面，导航栏的<a>标签全被它盖住了，自然没法触发点击或者选中文本。而底部footer不受影响，应该是footer不在这个overlay的覆盖范围内（或者在页面更靠下的位置）。

给你两种解决方案，选适合你的就行： #

方案1：让overlay忽略鼠标事件（快速修复）

给#overlay添加pointer-events: none属性，这个属性会让元素完全忽略所有鼠标交互，点击会直接穿透到下面的导航栏链接：

#overlay{
  font-family: Oswald;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: 700;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 新增这一行 */
}

⚠️ 注意：如果后续你要给overlay里加可交互的元素，记得给那些元素单独设置pointer-events: auto，不然它们也会失去交互性。

方案2：限制overlay的覆盖范围（更符合语义）

你的.section1是轮播区域，高度刚好是导航栏下方的94vh，应该把overlay限制在这个容器里：

1. 先给.section1添加相对定位，让它成为overlay的定位参考：

.section1{
  background: url(files/home-slideshow-001.jpeg);
  height: 94vh;
  background-size: cover;
  position: relative; /* 新增这一行 */
}

2. 然后修改#overlay的定位方式，改成基于父容器居中：

#overlay{
  font-family: Oswald;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现完美居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

这样overlay就只会覆盖轮播区域，再也不会挡住导航栏了。

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