Search code examples
htmlcssz-index

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

I have the following markup at the moment: https://jsfiddle.net/axgetf94/

I'm looking to build a responsive full screen video menu. Here's an image to what it looks like at the moment: imgur

I'm talking about the bottom right tile. There are two icons, in an achor-tag which again are wrapped in a seperate div. My problem is, that one of those icons isn't clickable because of a div overlay. I thought that this might be solved by giving both the div's and the anchor tags a position and a z-index value. Unfortunately this doesn't solve my problem as the f-button is still not clickable.

Here's my 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>

After positioning my div's:

.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%);
}

I give my links a pos: rel as well as a z-index of 1:

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

The right button remains unclickable unfortunately and even though I looked into other z-index issues I can't seem to resolve mine. Thanks in advance guys!

Solution

  • Both your links are in surrounding elements that both use this class:

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

    So both of them have 100% width and they are at the same vertical position (top: 50%), therefore they are on top of each other, meaning that the vimeo link's container covers the facebook link's container, making it not clickable. Use the browser's developer tools, there you see it.

    Assign these containers different classes that don't have 100% width and are placed next to each other.