为什么固定定位div嵌套在a标签内点击无法跳转至目标站点？

问题原因 #

你代码中的div使用了position: fixed定位，该定位方式会让元素完全脱离正常文档流。包裹div的a标签默认是行内元素，未设置宽高、定位属性的情况下，实际可点击区域尺寸为0，点击操作直接作用在脱离文档流的div上，无法触发父级a标签的跳转逻辑，因此无法跳转。

实现点击#NW跳转的解决方案 #

下面提供两种可行方案：

方案1：调整定位归属（语义更规范） #

将fixed定位从div转移到a标签上，同时将a标签设为块级元素，直接用a标签承担展示和跳转功能，无需额外嵌套div：
修改后的CSS：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0
}

a {
  position: fixed;
  width: 50%;
  height: 50%;
  display: block;
}

#NW {
  top: 0;
  left: 0;
  background: orange
}

#NE {
  top: 0;
  left: 50%;
  background: blue
}

#SW {
  top: 50%;
  left: 0;
  background: green
}

#SE {
  top: 50%;
  left: 50%;
  background: red
}

修改后的HTML：

<a href="https://www.google.com" id="NW"></a>
<a href="https://www.google.com" id="NE"></a>
<a href="https://www.google.com" id="SE"></a>
<a href="https://www.google.com" id="SW"></a>

方案2：保留现有DOM结构，给div绑定跳转事件 #

如果不想调整现有DOM结构，可以直接给id为NW的div绑定跳转逻辑，同时添加鼠标样式提示可点击：
新增CSS：

#NW {
  cursor: pointer;
}

修改后的对应HTML节点：

<div id="NW" onclick="window.location.href='https://www.google.com'"></div>

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