VoxelGod
@VoxelGod
Настройка шаблонов WordPress

Как вывести надпись на передний план?

Здравствуйте. Есть данный сайт: justme.matdev.ru/index-fade-slider.html
Тут используется плагин slick-slider. Он применяется к div с классом .slick-slider.
Мне нужно вывести надписи НАД полупрозрачной частью сайта. Мои настройки верны до того момента, пока не добавляю этот плагин. В интернете нарыл что-то относительно того, что нужно фиксить transform: tranlate3d, но мои попытки были тщетны. Надеюсь на вашу помощь. Заранее спасибо!
  • Вопрос задан
  • 1295 просмотров
Решения вопроса 2
@edk55
А что, если ты этот полупрозрачный фон добавишь на слайд? Иначе, судя по всему, не получится сделать, потому что у тебя картинка на слайде, текст на слайде, а полупрозрачный фон стоит отдельно от slick-slider'a, соответственно есть два варианта:
1) слайдер будет "над" полупрозрачным фоном (тогда полупрозрачный фон будет не видно из-за картинки)
2) полупрозрачный фон будет "над" слайдером, тогда текст будет "под" полупрозрачным фоном.

Дело тут не в "transform: translate3d", а в z-index и позиционировании блоков.
Ответ написан
YourDesire
@YourDesire
Я вообще по образованию бухгалтер...
Вступление:
Это НЕ невозможно. Приблизительный пример.
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 тексту, и соответственно, блоку с серым фоном.

Блин какая простыня текста. Да я мастер выражаться коротко и доходчиво
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
Без белой рамки смотрится лучше.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы