Как вставить OWL carousel поверх фона?

Question

[Артём Белых]

Здравствуйте, я хочу вставить контент(Слайдер на owl) поверх моей картинки, как это можно сделать вот код моего слайдер:

<section class="advantages">
    <img src="https://zhukov.co/wp-content/themes/zhukov/img/%D0%9C%D0%BE%D0%BB%D0%BE%D1%82%D0%BE%D0%BA%20(2)-min.jpg">
    <div class="block__content">
        <h1>ПРЕИМУЩЕСТВО РАБОТЫ С НАМИ</h1>
        <div class="owl-carousel owl-theme">
            <div class="owl-carousel__items">
                <img src="https://c0.klipartz.com/pngpicture/171/373/gratis-png-iconos-de-computadora-sistemas-operativos-macintosh-icono.png">
                <p>
                    Бесплатные консультационные
                    Услуги - Юридическая
                    консультация является
                    самой распространённой
                    формой юридической помощи,
                    наши специалисты ответят
                    на все ваши вопросы
                </p>
            </div>
            <div class="owl-carousel__items">
                <img src="https://c0.klipartz.com/pngpicture/171/373/gratis-png-iconos-de-computadora-sistemas-operativos-macintosh-icono.png">
                <p>
                    Бесплатные консультационные
                    Услуги - Юридическая
                    консультация является
                    самой распространённой
                    формой юридической помощи,
                    наши специалисты ответят
                    на все ваши вопросы
                </p>
            </div>
            <div class="owl-carousel__items">
                <img src="https://c0.klipartz.com/pngpicture/171/373/gratis-png-iconos-de-computadora-sistemas-operativos-macintosh-icono.png">
                <p>
                    Бесплатные консультационные
                    Услуги - Юридическая
                    консультация является
                    самой распространённой
                    формой юридической помощи,
                    наши специалисты ответят
                    на все ваши вопросы
                </p>
            </div>
            <div class="owl-carousel__items">
<!--Тестовая картинка-->
                <img src="https://c0.klipartz.com/pngpicture/171/373/gratis-png-iconos-de-computadora-sistemas-operativos-macintosh-icono.png">
                <p>
                    Бесплатные консультационные
                    Услуги - Юридическая
                    консультация является
                    самой распространённой
                    формой юридической помощи,
                    наши специалисты ответят
                    на все ваши вопросы
                </p>
            </div>
        </div>
    </div>
</section>

небольшой кусок css кода:

.advantages img {
    width: 100%;
    height: 100vh;
    position: relative;
}
.advantages .block__content {
    position: absolute;
    left: 0;
    top: 0;
}

position: absolute; на .block__content не работает, а наоборот все item становятся не фиксированными по ширине!
Как это можно реализовать?

Answer 1

[Simkav]

Если я правильно понял, то вам нужно дописать

bottom:0;
rigth:0;

в 2 селектор

Comments

[Артём Белых]

Не не так вот сайт если нужно! В самом низу этот блок и картинка уже вставлена в эту картинку нужно поместить мою owl карусель!

[Simkav]

Артем, Секции Advantages relative, диву со слайдером абсолют и top: 100px; да и по хорошему переделать бы структуру

[Артём Белых]

Simkav, Всё равно не работает

[Simkav]

Артем, Слайдер внутри картинки то что вы и хотели, коряво выглядит потому что структура плохая и стили неправильные.