Как отображать текст поверх героя / видео раздела

Question

У меня небольшая проблема с отображением текста поверх полноэкранного видео, которое есть на моем сайте.Я работал раньше, но не помню, как мне это удалось, и я безуспешно пробовал свойства z-index, текст просто продолжает отображаться под моим элементом видео, а не сверху.

Я сделал несколькоредактирует и не осознает, что панель испортилась и у нее нет резервной версии.

Вот что у меня есть, я, наверное, просто что-то упускаю из виду, но не уверен, почему это не так.Я работаю на меня.

 <section class="section-ux-design">

        <video id="video" autoplay loop muted>
            <source src="/video.mp4" type="video/mp4">

        </video>

        <div class="overlay-text">
            <h2>Text</h2>
            <p>Text</p>

        </div>

    </section>

CSS:

.section-ux-design {
    position: relative;
}

.overlay-text {
    position: absolute;
    color: #fff;
    padding: 0% 15%;
    z-index: 0;
}

.overlay-text h2 {
    text-align: left;
}

#video {
    width: 100vw;
    z-index: -1;
}

Я стремлюсь достичь чего-то вроде этого: https://sparkengine.tv/, но только с текстом, так как это не происходитбыть моим главным героем / видео заголовка.

Answer 1

.overlay-text {
    position: absolute;
    color: #fff;
    padding: 0% 15%;
    z-index: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

Это должно поместить текстовый контейнер поверх видео, и вы можете расположить текст оттуда.

Answer 2

Вам необходимо определить position для вашего элемента #video, поскольку z-index влияет только на элементы со значением позиции, отличным от static (которое используется по умолчанию).

Вам также следует попытаться указать фактические абсолютные координаты .overlay-текста, так как в противном случае он просто будет перемещен ниже раздела видео. Я поправил с помощью следующего муравья отлично работает для меня:

.section-ux-design {
    position: relative;
}

.overlay-text {
    position: absolute;
    color: #fff;
    padding: 0% 15%;
    z-index: 0;
    top:0;
    left:0;
}

.overlay-text h2 {
    text-align: left;
}

#video {
    width: 100vw;
    z-index: -1;
    position:relative;
}