Как вывести дочерний элемент на передний план?

Question

[zuraavl]

Есть три элемента:

<button class="slick-next slick-arrow">
<div class="slick-list draggable">
<button class="slick-prev slick-arrow">

Кнопки по 50% width, с position: absolute и z-index: 10 и opacity: 0
Блок с слайдером - с position: relative и z-index: 10 - содержит ссылки, по которым невозможно нажать, потому что кнопка его перекрывает.
Есть ли какая-то возможность сделать элементы внутри слайдера кликабельными, с учетом что поверх слайдера стоят невидимые кнопки?

Comments

[Ragtime Kitty]

"Невидимые кнопки" это у вас значит полностью прозрачные? Тогда button { pointer-events: none }, или button { display: none }

[zuraavl]

Ragtime_Kitty, нужно же чтобы они могли нажиматься

[Ragtime Kitty]

zuraavl, а как у вас будут кнопки нажиматься, если поверх них вы хотите сделать слайдер? оО

[zuraavl]

Ragtime_Kitty, верней кнопки поверх слайдера, который тоже содержит кнопки. Да сам не знаю как, но клянусь года 3 назад я так делал

[Ragtime Kitty]

zuraavl, попробуйте кнопкам, которые внутри слайдов задать z-index выше, чем у кнопок переключения слайдов. Но все равно это странно: две кнопки, которые собой полностью закрывают интерактивные элементы. Сделайте их поменьше что ли..

[zuraavl]

Ragtime_Kitty,
Да, я так сделал. Но нужно чтобы кнопки были на всю ширину, то есть по 50%. Думаю на скриншоте будет наглядней что мне нужно

[Ragtime Kitty]

zuraavl, ну да, так понятнее. Тогда как я и сказала:

кнопкам, которые внутри слайдов задать z-index выше, чем у кнопок переключения слайдов

https://jsfiddle.net/k59sct1m/

Answer 1

[Владислав]

Вы же сам наложили кнопки поверх сладйера и дали им 50% ширины, но зачем? Если вам не нужны кнопки то просто выключите их в опцияъ слайдера ну или же дайте display:none смысл от прозрачных кнопок, которые лежат поверх слайдера. Можно еще дать: .slick-arrow { height: 0; }
тогда в :before уже задать высоту кнопок.

Comments

[zuraavl]

мне нужно чтобы они были прозрачные с 100% высоты. Кнопки переключают слайды вперед/назад. На слайдах картинки с кнопкой ссылкой