由于div叠加，按钮无法点击 - 可能的z-index问题

Question

我目前有以下标记：https://jsfiddle.net/axgetf94/

我正在寻找建立响应式全屏视频菜单。这是一张目前的图像：

我正在谈论右下方的瓷砖。在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

用span替换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>

跨度不会覆盖可点击区域

Answer 2

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

// PostController::getAction

use JMS\Serializer\SerializationContext;
use JMS\Serializer\SerializerBuilder;

$serializer = SerializerBuilder::create()->build();
$context = SerializationContext::create();
$groups = [];

// Assuming $request contains the "fields" param
$fields = $request->query->get('fields');

// Do this kind of check for all fields in $fields
if (in_array('foos', $fields)) {
    $groups[] = 'withFooAssociation';
}

// Tell the serializer to use the groups previously defined
$context->setGroups($groups);

// Serialize the data
$data = $serializer->serialize($posts, 'json', $context);

// Create the view
$view = View::create()->setData($data);

return $this->handleView($view);

Answer 3

您的链接都在使用此类的周围元素中：

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

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

为这些容器分配不同宽度并且彼此相邻放置的不同类。