Вступление:
Это НЕ невозможно. Приблизительный пример.
codepen.io/anon/pen/kkgZrm
Как заставить "это" работать:
slick.css правило для .slick-slider. Отключаем position: relative
slick.css строка 38, 39 и далее. Отключаем transform
slick.css строка 96. Прописываем внутрь правила .slick-initialized .slick-slide следующее z-index: auto !important
slider-fade.css строка 2 правило .header-image. Отключаемposition: relative и z-index
layout-slider.css строка 112 правило .header-image Отключаем z-index
slider-fade.css Правило .header-content Строка 35 прописываем position: absolute; z-index: 2000;
slider-fade.css Строка 25 Правило .header-color-overlay ставим z-index: 1000;
Или переопределить эти правила в другом css файле... Что болеее предпочтительно...
После (в обоих случаях) придется пофиксить z-index для пары других элементов (например белая граница), но суть должны уловить...
Постараюсь объяснить почему даже при условии того, что вы задали
z-index для элемента с текстом бОльший, чем у блока с серым фоном, элемент с текстом всеравно остался позади.
Да и что тут объяснять, все довольно просто:
Дочерние элементы наследуют z-index родителя и "находятся в его уровне z-index".
Чтобы наглядно продемонстрировать это, приведу ссылку на пример, который разместил в начале. С небольшими правками.
Сравните код и вы все поймете
codepen.io/anon/pen/ORWQEw
Суть решения вашей проблемы сводится к тому, чтобы убрать все
z-index, которые есть у элементов на пути к блоку с текстом, начиная (но исключая из "чистки" от
z-index) с того элемента, в котором лежит и слайдер и контейнер с серым фоном. Далее всего-навсего задается нужный
z-index тексту, и соответственно, блоку с серым фоном.
Блин какая простыня текста. Да я мастер выражаться коротко и доходчиво
