求助：使用Z-Index无法隐藏指定锚点链接的问题

嘿，我来帮你搞定这个需求！先说说你当前代码里的几个关键问题，再给你一套能实现目标的完整方案：

一、现有代码的坑 #

• 选择器不匹配：你CSS里写的#details是要定位那个锚点链接，但HTML里的<a>标签根本没加id="details"！这就导致固定定位的样式完全没生效，这是最核心的问题。
• z-index思路不对：z-index只能控制元素的堆叠层级，最多让目标区块盖在链接上面，但没法真正“隐藏”链接——而且固定定位元素和普通流元素的堆叠上下文本来就有差异，靠这个实现隐藏根本行不通。

二、完整解决方案 #

我们分两步走：先把链接的样式搞对，再用JS监听滚动，判断目标区块是否进入视口，动态切换链接的显示状态。

1. 修正HTML和CSS #

先给链接加上正确的id，同时把目标区块的name换成标准的id（锚点链接用id更靠谱）：

<div class="gallery"></div>
<a href="#info" id="details">Details</a>
<div id="info" class="textblock"></div>

然后写好固定定位的样式，给个高z-index确保默认显示在最上层，再加个过渡动画让隐藏/显示更顺滑：

#details {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px 15px;
  background: #fff;
  text-decoration: none;
  z-index: 100;
  transition: opacity 0.3s ease;
}

.textblock {
  /* 这里随便加些样式模拟长内容，方便测试滚动 */
  margin-top: 1000px;
  height: 500px;
  background: #eee;
}

2. 用JavaScript实现滚动隐藏逻辑 #

我们需要监听页面滚动，判断#info区块是否进入视口。如果进入了，就把链接隐藏；否则显示回来：

const detailsLink = document.getElementById('details');
const infoBlock = document.getElementById('info');

function checkScrollStatus() {
  // 获取目标区块的位置信息
  const blockRect = infoBlock.getBoundingClientRect();
  // 判断区块是否进入视口：顶部不超过窗口高度，底部不低于窗口顶部
  const isBlockInView = blockRect.top <= window.innerHeight && blockRect.bottom >= 0;
  
  // 根据状态切换链接的显示
  if (isBlockInView) {
    detailsLink.style.opacity = '0';
    detailsLink.style.pointerEvents = 'none'; // 隐藏后禁止点击，避免误触
  } else {
    detailsLink.style.opacity = '1';
    detailsLink.style.pointerEvents = 'auto';
  }
}

// 页面加载时先检查一次状态
window.addEventListener('load', checkScrollStatus);
// 滚动时实时检查
window.addEventListener('scroll', checkScrollStatus);

三、小补充 #

• 如果你想要完全隐藏（而不是半透明），可以把opacity换成display: none，但就没有平滑过渡的效果了，看你需求选。
• 关于WordPress的样式表：确保你把这些CSS和JS正确添加到主题里——比如用自定义izer的“额外CSS”加样式，用child theme的functions.php注册并加载脚本，或者用插件添加自定义JS都可以。

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