Показать блок поверх другого без absolute?

Question

[GeKskill]

Слайд имеет разное количество контента, которое задает высоту самому слайду и есть другой блок, который является фоном слайда ( может быть как изображение, так и видео или слайдер ). Как показать контент поверх фонового блока без абсолютного позиционирования к самому слайду, иначе высота слайда = 0px Простой пример на codepen. Надо как на втором слайде, но там я задал высоту через style и это не подходит.

Comments

[Ankhena]

Гридами.
Но размер будет определяться большим из них или по соседним блокам, если stretch.

[GeKskill]

Ankhena, Сработало, спасибо! Как отметить в качестве ответа?

[Сергей delphinpro]

Абсолютом можно позиционировать не слайды, а фоновый блок (картинку)

Answer 1

[Saip]

Засунуть в слайд контент, который будет определять высоту, например текст. Дать z-index этому контенту. Далее засунуть в этот слайд блок, например картинку или видео и уже этому блоку дать абсолютное позиционирование.

<div class="your_slide">
    <div class="your_content">Hello world</div>
    <span class="your_back"></span>
</div>

style.css

.your_slide{
    position: relative;
}
.yout_content{
    position: relative;
    z-index: 2;
}
.your_back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

Comments

[GeKskill]

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

[Saip]

GeKskill, Перекрытие регулируется параметром z-index, я же указал. Для того чтобы работал этот параметр необходимо обязательно указать position: relative или другие отличные от значения по умолчанию

[GeKskill]

Сорри, я когда скопипастил ваш код, а там была опечатка в классе. Работает, спасибо!

[Saip]

GeKskill, Отметьте, пожалуйста, как ответ)

[Сергей delphinpro]

поменять в разметке местами задник и контент и тогда z-index не нужен будет.