Как запретить оверлею загораживать отдельно взятый элемент?

Question

[Alexandroppolus]

Суть вопроса: есть некий див, допустим у него z-index = 0, неважно, в общем этот див создает свой контекст наложения. Внутри дива, помимо прочего, есть кнопка.
Над дивом распростерся полупрозрачный оверлей (div, position:fixed, z-index:10), который всё перекрыл.

Как сделать, чтобы оверлей не перекрывал кнопку? Разумеется, выставление для неё большого z-index не помогает из-за вышеупомнянутого контекста наложения.

Ссылка на посмотреть и покрутить.

Есть ли нормальные способы решения, через css? Пока что "план Б" - лепить костыли, а именно создавать клон кнопки и втыкать поверх оверлея с указанием позиции. Если кнопка поедет, отслеживать и передвигать клон.

upd: добавил ссылку на кодопен - https://codepen.io/alexandroppolus/pen/emYYobM

Comments

[szQocks]

ссылка не работает, можно на codepen прикрутить ?

[Alexandroppolus]

szQocks, https://codepen.io/alexandroppolus/pen/emYYobM

Answer 1

[Сергей delphinpro]

Без костылей вряд ли получится.
Но можно закостылить на css, без javascript

overlay - z-index: 1;
div - z-index: 2;

то есть оверлей будет под блоком

внутри дива свой отдельный оверлей и у кнопки z-index большего этого внутреннего оверлея.

Comments

[Alexandroppolus]

Ага, понял, спасибо. Сложность в том, что это делается для всплывашки-подсказки в ui-kit у нас на проекте, и должно работать в разных ситуациях. Конкретно здесь проблема в том, что див может, к примеру, частично перекрываться чем-то с z-index=1, и если чуть приподнять див, то данное перекрытие пропадет. Плюс могут быть вложенные контексты наложения, тогда предложенный вариант придется делать для каждого из них...

Собственно, потому и спрашивал. Чтобы прям можно было нативно "дырявить" оверлей по контурам конкретного элемента. В css много всякого появляется регулярно, я слегка отстал от переднего края..