How to insert OWL carousel over background?

Question

css

Hello, I want to insert content (Slider on owl) over my image, how can I do this here is the code of my slider:

<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>

small piece of css code:

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

position: absolute; does not work on .block__content, but on the contrary, all item become non-fixed in width!
How can this be implemented?

Answer 1

If I understood correctly, then you need to add

bottom:0;
rigth:0;

in 2 selector