Как отобразить элемент поверх :before его предка на мобильных устройствах?

Question

[Valentine]

Всем привет. Помогите, пожалуйста, со следующей проблемой:

Есть блок:


Рамка (коричневая) задана так:

:before {
    content: url(...);
    position: absolute;
    z-index: 1;
}

Внутри находится ссылка:

a {
    display: block;
    position: relative;
    z-index: 5;
}

Суть проблемы в том, что на десктопе работает все отлично, а на мобильной версии ссылка располагается под :before (т.е. возможность кликнуть по ней отсутствует)

Comments

[Ankhena]

Без кода не очевидно, посмотрите это https://webref.ru/css/pointer-events

[Smeecy Smeecy]

Засуньте код в codepen , чтобы глянуть.

[Ankhena]

Valentine: ну лично я не буду скачивать никакие архивы, когда есть codepen и jsfiddle

[Valentine]

Ankhena W: а как с изображениями быть?

[Ankhena]

Valentine: если они никуда не выложены, заменить на любые другие из яндекс.картинок или воспользоваться сервисом https://placehold.it/ или любым аналогичным

[Сергей delphinpro]

pointer-events: none для рамки

[Valentine]

Сергей: Огромное спасибо!!!

[Сергей delphinpro]

Valentine: Ankhena W то же самое порекомендовала в первом сообщении =))

[Valentine]

Сергей: Та я уже понял, не сталкивался ни разу

Answer 1

[Smeecy Smeecy]

У тебя в мобильной версии появляется карусель, которой нет в десктопе , её стили перекрывают ссылку.

Comments

[Valentine]

Smeecy Smeecy: Проверял такой вариант, не перекрывают(