由于 div 覆盖，按钮不可点击 - 可能是 z-index 问题

Question

我想要构建一个响应式全屏视频菜单。这是它目前的样子：

我说的是右下角的图块。有两个图标，在一个 achor-tag 中，又被包裹在一个单独的 div 中。我的问题是，其中一个图标由于 div 覆盖而无法点击。我认为这可以通过给 div 和锚标记一个位置和一个 z-index 值来解决。不幸的是，这并没有解决我的问题，因为 f 按钮仍然不可点击。

这是我的 HTML:

<div class="sm_tile sm_fb menu-item">
  <div class="tcvpb_background_center">
    <a href="http://facebook.com" title="fb">
      <i class="fa fa-facebook"></i>
    </a>
</div>
</div>
<div class="sm_tile sm_vm menu-item">
  <div class="tcvpb_background_center">
    <a href="http://vimeo.com" title="vm">
      <i class="fa fa-vimeo"></i>
    </a>
  </div>
</div>

定位我的 div 之后：

.tcvpb_background_center {
    left: 50%;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 0;
}

.sm_vm .tcvpb_background_center {
    transform: translate(-65%);
}
.sm_fb .tcvpb_background_center {
    transform: translate(-35%);
}

我给链接一个 pos:rel 以及 z-index 1:

#menu-main-menu .menu-item .sm_tile a {
    border: 1px solid #fff;
    padding: 10px;
    position:relative;
    z-index: 1;
}

不幸的是，右键仍然无法点击，即使我调查了其他 z-index 问题，我似乎也无法解决我的问题。提前谢谢大家！

Answer 1

而不是你复杂的 css + html。我的建议是使用更清洁的 DOM:

<div style="display:flex; padding:10px">
  <a style="flex:1" href="http://facebook.com" title="fb">f</a>
  <a style="flex:1" href="http://vimeo.com" title="vm">v</a>
</div>

Answer 2

你的两个 link 都在周围的元素中，它们都使用这个 class:

.tcvpb_background_center {
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
}

所以它们都有 100% 的宽度并且它们处于相同的垂直位置（顶部：50%），因此它们在彼此之上，这意味着 vimeo link 的容器覆盖facebook link 的容器，使其不可点击。使用浏览器的开发人员工具，您会看到它。

为这些容器分配不同的 class 宽度不为 100% 且彼此相邻的容器。

Answer 3

将 div 替换为跨度

<a href="my link"><img  class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>

跨度不会覆盖可点击区域

由于 div 覆盖，按钮不可点击 - 可能是 z-index 问题

Button isn't clickable because of of a div overlay - possible z-index issue

html

css

z-index