首页 文章

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

提问于
浏览 次
0

我现在有以下标记：https://jsfiddle.net/axgetf94/

我'm looking to build a responsive full screen video menu. Here'是一张目前看起来像的照片：
imgur

我说的是右下方的瓷砖 . 在achor-tag中有两个图标，它们再次包含在一个单独的div中 . 我的问题是，由于div叠加，其中一个图标无法点击 . 我认为这可以通过给div和anchor标签赋予位置和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问题，我似乎无法解决我的问题 . 先谢谢你们！

html css css3 z-index

3 回答

  • 1

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

    .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链接的容器，使其无法点击 . 使用浏览器的开发人员工具，您可以看到它 .

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

    回复于
  • 0

    用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>

    Span 不会覆盖可点击区域

    回复于
  • 0

    而不是你复杂的CSS CSS . 我的建议是使用更清洁的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>
    回复于

相关问题