кнопка не кликабельна из из сНа наложения - возможно г-индекс вопрос

У меня есть следующий код в данный момент: https://jsfiddle.net/axgetf94/кнопка не кликабельна из из сНа наложения - возможно г-индекс вопрос

Я ищу построить отзывчивое меню видео в полноэкранном режиме. Вот изображение, на которое оно похоже на данный момент: imgur

Я говорю о нижней правой плитки. Есть два значка в теге-ашоре, который снова завернут в отдельный div. Моя проблема заключается в том, что один из этих значков не доступен для клика из-за наложения div. Я думал, что это может быть решено путем предоставления позиции div и анкерных меток позиции и значения z-индекса. К сожалению, это не решает мою проблему, так как кнопка 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>

После размещения своих Див-х:

.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, а также г-индекс 1:

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

К сожалению, правая кнопка остается незаметной, хотя я смотрел на другие проблемы с z-index, которые, похоже, не могут решить. Спасибо заранее, ребята!

источник

2016-03-25 No Reply

What'st он цель наложения? Похоже, ваш макет сложнее, чем нужно. Опишите цель. – isherwood

@TrevorClarke Обе эти буквы являются ссылками, а левая - интерактивной, правой - нет. Хотя он имеет более высокий z-индекс, чем родительский div. –

@isherwood Я ищу, чтобы создать отзывчивое полноэкранное видео-меню. Вот изображение того, на что оно похоже на данный момент: [imgur] (http://i.imgur.com/OTuMSzE.jpg) Мне нужно наложение, чтобы правильно расположить эти ссылки. Я знаю, что могут быть и другие решения, но я действительно ищу способ решить эту проблему с помощью этого. –

Обе ваши ссылки в окружающие элементы, как использовать этот класс:

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

Таким образом, обе из них имеют ширину 100%, и они на (верхняя часть: 50%), поэтому они находятся друг над другом, что означает, что контейнер vimeo link закрывает контейнер ссылки facebook, делая его не интерактивным. Используйте инструменты разработчика браузера, там вы его видите.

Назначьте эти контейнеры различными классами, которые не имеют ширины 100% и расположены рядом друг с другом.

источник

2016-03-25 18:08:48 Johannes

вместо вас сложный css + html. мое предложение заключается в использовании более чистого 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>

источник

2016-03-25 16:36:54

Большое спасибо, Oron. Но я не искал способ реализовать свое меню с помощью flexbox. Я только ищу способ получить «f» clickable, используя мою текущую разметку. Тем не менее, очень ценится. –

Привет, NP :), пожалуйста, обновите свой JSFiddle, чтобы результат был более ясным, и я буду рад помочь вам. –

заменить 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>

пролет не будет покрывать область интерактивной

источник

2017-01-25 17:29:51 Matoeil

кнопка не кликабельна из из сНа наложения - возможно г-индекс вопрос

ответ

Смежные вопросы