@Ste11

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

Здравствуйте, я хочу вставить контент(Слайдер на 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 становятся не фиксированными по ширине!
Как это можно реализовать?
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
Simkav
@Simkav
Если я правильно понял, то вам нужно дописать
bottom:0;
rigth:0;

в 2 селектор
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы