Knopf ist nicht anklickbar wegen eines div Overlay - möglich z-index Ausgabe

Question

Ich habe das folgende Markup im Moment: https://jsfiddle.net/axgetf94/

Ich suche ein reaktionsschnelle Vollbild-Video-Menü zu bauen. Hier ist ein Bild, wie es im Moment aussieht:

Ich spreche von der unteren rechten Kachel. Es gibt zwei Icons in einem achor-tag, die wiederum in ein separates div gehüllt sind. Mein Problem ist, dass eines dieser Icons wegen eines Div-Overlays nicht anklickbar ist. Ich dachte, dass dies gelöst werden könnte, indem sowohl die div-Tags als auch die Anker-Tags eine Position und einen z-Index-Wert erhalten. Leider löst das mein Problem nicht, da die f-Taste immer noch nicht anklickbar ist.

Hier ist mein 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> 

Nach meiner div Positionierung:

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

gebe ich meine Links eine pos: rel sowie einen Z-Index von 1:

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

Der rechte Knopf bleibt leider nicht klickbar und obwohl ich in andere Z-Index Probleme geschaut habe, kann ich nicht scheinen, meine zu lösen. Vielen Dank im Voraus Jungs!

Answer 1

Sowohl Ihre Links sind Elemente in der Umgebung, die sowohl diese Klasse zu verwenden:

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

so dass beide von ihnen 100% Breite haben, und sie sind bei der gleiche vertikale Position (oben: 50%), deshalb sind sie übereinander, was bedeutet, dass der Container des vimeo-Links den Facebook-Link-Container abdeckt und nicht klickbar macht. Benutze die Entwicklerwerkzeuge des Browsers, dort siehst du es.

Weisen Sie diesen Containern verschiedene Klassen zu, die nicht 100% breit sind und nebeneinander liegen.

Answer 2

anstelle von Ihnen komplex css + html. mein Vorschlag ist viel sauberer DOM zu verwenden:

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

ersetzen div mit Spannweite als solche

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

die Spanne wird die klickbare Region