Düğme çünkü div bindirmenin ait tıklanabilir değil - olası Z-endeksi sorununu

Question

şu anda aşağıdaki biçimlendirme var: Duyarlı bir tam ekran video menüsünü oluşturmak için arıyorum https://jsfiddle.net/axgetf94/

. Şu anda göründüğü şeye ait bir resim:

Sağ alt döşemeden bahsediyorum. Yine bir ayrı div'a sarılmış bir achor etiketinde iki simge vardır. Benim sorunum, bu simgelerden birinin div overlay nedeniyle tıklanabilir değil. Bunun hem div hem de çapa etiketlerinin bir konum ve bir z-endeksi değeri vererek çözülebileceğini düşündüm. F düğmesi hala tıklanabilir olmadığından, bu sorunumu çözmüyor. Benim div 's yerleştirdikten sonra

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

: Burada

benim HTML var

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

benim bağlantılar bir pos vermek: rel yanı sıra 1 z-index:

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

Doğru buton maalesef ne yazık ki ve diğer z-endeksine bakmamıza rağmen benimkini çözemiyorum. Şimdiden teşekkürler çocuklar! Karmaşık css + html yerine

Answer 1

: benim önerim daha temiz DOM kullanmaktır% 100 genişliğe sahip Yani

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

ikisini de onlar altındadır Aynı dikey pozisyonda (üst:% 50), bu nedenle birbirlerinin üstünde bulunurlar, yani vimeo link'inin kabı, facebook bağlantısının kapsayıcısını tıkar, böylece tıklanabilir değildir. Tarayıcınızın geliştirici araçlarını kullanın, orada görüyorsunuz.

Bu kapsayıcıları,% 100 genişliğe sahip olmayan ve birbirinin yanına yerleştirilmiş farklı sınıflar atayın.

Answer 2

. Her iki bu sınıfı kullanan elemanlar çevreleyen içindedir Hem bağlantılarınızı

<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

böyle

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

yayılma tıklanabilir bölgesini