HTML页脚链接无法点击，设置高z-index属性无效应如何排查？

问题根源 #

1. z-index属性仅对position值不为static（元素默认定位值）的元素生效，你直接给#footer设置z-index不会生效，这是调整z-index无效的核心原因。
2. 你当前的布局逻辑里，#wrapper设置了margin-bottom: -5em，会把#wrapper的实际可交互范围向下延伸5em，刚好覆盖在下方的#footer区域之上，你点击链接的时候实际触发的是上层#wrapper的透明区域，自然点不到footer里的链接。

解决方法 #

修改#footer的样式，添加相对定位和z-index，让它的层级高于上层的#wrapper即可：

#footer {
  position: relative;
  z-index: 10;
  /* 可额外设置高度匹配负margin值，优化布局对齐：
  height: 5em;
  line-height: 5em;
  */
}

可选排查方案 #

如果修改后仍有问题，可通过浏览器开发者工具快速定位：

• 用元素选择器直接点击无法触发的链接区域，看选中的元素是不是#wrapper或其内部元素，确认是否存在上层元素覆盖的问题
• 查看链接元素的事件监听器列表，排查是否有JS代码阻止了点击事件的冒泡或默认行为
• 临时给#wrapper添加半透明背景样式background: rgba(255,0,0,0.2)，可直观看到上层元素的覆盖范围

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