HTML download属性在section内失效：点击无反应且光标不切换指针

你的下载按钮无法触发下载、光标不切换为指针样式，核心问题出在section的层级设置上：

看你提供的CSS代码，包裹按钮的section对应的类.dwnld_bt设置了z-index: -1，这会让整个section及其内部所有子元素都沉到页面底层（甚至在body背景之下）。此时鼠标看似点击在按钮上，实际触发的是上层的页面元素，自然无法触发下载事件，光标也不会切换为指针样式。当你把按钮移到section外，脱离了这个层级异常的容器，元素回到正常交互层级，功能就恢复了。

解决办法 #

直接移除.dwnld_bt中的z-index: -1，或者把它改成正数（比如z-index: 1），就能让section及其子元素回到正常交互层级：

修改后的CSS代码：

.dwnld_bt {
  position: relative;
  margin-top: 5%;
  width: 100%;
  background-color: antiquewhite;
  padding: 1% 10% 4% 10%;
  /* 移除z-index: -1，或改为正数如z-index: 1 */
}

.profiles {
  display: flex;
  justify-content: flex-start;
  column-gap: 5%;
  flex-wrap: wrap;
}

.dwnd-button1 {
  position: relative;
  top: 12%;
  left: -50%;
  /* 可选：显式设置光标样式，增强交互反馈 */
  cursor: pointer;
}

另外，给.dwnd-button1加上cursor: pointer，可以进一步确保hover时光标显示为指针样式，提升交互体验。

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