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

Question

[Гриша Никольский]

Здравствуйте. Есть данный сайт: justme.matdev.ru/index-fade-slider.html
Тут используется плагин slick-slider. Он применяется к div с классом .slick-slider.
Мне нужно вывести надписи НАД полупрозрачной частью сайта. Мои настройки верны до того момента, пока не добавляю этот плагин. В интернете нарыл что-то относительно того, что нужно фиксить transform: tranlate3d, но мои попытки были тщетны. Надеюсь на вашу помощь. Заранее спасибо!

Answer 1

[edk55]

А что, если ты этот полупрозрачный фон добавишь на слайд? Иначе, судя по всему, не получится сделать, потому что у тебя картинка на слайде, текст на слайде, а полупрозрачный фон стоит отдельно от slick-slider'a, соответственно есть два варианта:
1) слайдер будет "над" полупрозрачным фоном (тогда полупрозрачный фон будет не видно из-за картинки)
2) полупрозрачный фон будет "над" слайдером, тогда текст будет "под" полупрозрачным фоном.

Дело тут не в "transform: translate3d", а в z-index и позиционировании блоков.

Comments

[Гриша Никольский]

Видимо, тут выход только такой. Спасибо!

[Гриша Никольский]

А не подскажешь, почему .col-md-3, которые оборачивают этот .header-content схлопываются? Вроде как для .header-content-wrapper позиционирование realtive включил.

Answer 2

[Виктор Новиков]

Вступление:
Это НЕ невозможно. Приблизительный пример.
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 тексту, и соответственно, блоку с серым фоном.

Блин какая простыня текста. Да я мастер выражаться коротко и доходчиво

Comments

[Гриша Никольский]

Спасибо, применю это для следующего хедера.

[Гриша Никольский]

А не подскажешь, почему .col-md-3, которые оборачивают этот .header-content схлопываются? Вроде как для .header-content-wrapper позиционирование realtive включил.

[Виктор Новиков]

.col-md-3, оборачивающие .header-context "схлопываются" потому что содержат внутри себя элемент с position: absolute. Если бы внутри .col-md-3 был хотя-бы 1 элемент, допустим с display: block, он бы принял его размеры. Можете проверить в JSFiddle например :).

Стоит отметить то, что не во всех случаях стоить использовать position: absolute. Например, если вам всего-навсего надо задать z-index элементу. Тут достаточно прописать position: relative элементу, и свойство z-index для него отработает.

Другой случай - когда нужно просто отпозиционировать элемент внутри контейнера. Тут также, можно обойтись без position: absolute, например, прописав float: left

А еще можно объеденять оба варианта))

[Виктор Новиков]

Гриша Никольский ответил выше

[Виктор Новиков]

По поводу схлопывания .header-content-wrapper. попробуйте добавить этому элементу класс .row и посмотрите что изменится. В частности добавится 2 псевдоэлемента с стилями типа: clear: both;. И тогда он не будет схлопываться. Почему так? Потому-что элементы col-md-* имеют float: left например. Помните туториалы по бутстрапу?

<div class="row">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>

Не зря там .row :)

[Гриша Никольский]

Виктор: Спасибо. Добавил .row к классу, но в итоге ничего не получил. Тот же .container вообще где-то вверху летает :)

[Виктор Новиков]

Гриша Никольский: Тот вариант я имел ввиду для элементов, лежащих внутри slick-slider slick-initialized... В случае же заголовка, то тут опять-же из-за position: absolute, row тут не поможет...

[Гриша Никольский]

Виктор: Принял. Спасибо за советы и уделенное время!

Answer 3

[profesor08]

Без белой рамки смотрится лучше.

Comments

[Виктор Новиков]

Мое сугубо личное считает точно также )

[Гриша Никольский]

Виктор: Только не дизайнер, что рисовал этот PSD :)