Отзывчивый заголовок слайдера с несколькими элементами

Question

У меня есть слайдер домашней страницы на веб-сайте, который, очевидно, также должен быть мобильным. Я использую Bootstrap 3 в качестве основы. На рабочем столе слайдер должен выглядеть следующим образом:

Изображение - фоновое изображение слайдера. Блок содержимого 1 - это полупрозрачное поле содержимого с текстом над изображением. Блок контента 2 аналогичен блоку контента 1 и находится внизу изображения , но все еще над изображением. Блок основного контента - остальная часть контента страниц сайта.

На мобильном устройстве это должно выглядеть следующим образом.

Изображение - фоновое изображение слайдера. Блок контента 1 - это полупрозрачный блок контента с текстом , но под изображением. Блок контента 2 аналогичен блоку контента 1 и находится ниже Блок контента 1 . Блок основного контента - остальная часть контента страниц сайта.

На мобильных устройствах это работает, поскольку блоки контента располагаются ниже / относительно изображения. Но на рабочем столе они также размещены под изображением. Я делаю на полях: -50% на рабочем столе Блок контента 1 , и он перемещает блок контента вверх, но изображение также масштабируется (уменьшается) с тем же%.

Мой CSS.

.carousel-header-container { /* Content block 1 */
    position: relative;
    width: 40%;
    height: auto;
    top: 0%;
    left: 10%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.carousel-content-row { /* Content block 2 */
    position: relative;
    width: 100%; 
    height: 8em;
}
@media only screen and (max-width: 768px) {
    .carousel-header-container { /* Content block 1 */
        position: relative;
        width: 100%;
        height: auto;
        top: 0%;
        left: 0%;
        overflow: hidden;
    }
    .carousel-content-row { /* Content block 2 */
        position: relative; 
        width: 100%; 
        height: 5em;
    }
}

И HTML.

<div class="item">
    <img src="/images/myimage.jpg" style="width:100%; height: 100%">

    <div class="carousel-header-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>

    <div class="carousel-content-row">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>
</div>

<div>
    This is the rest of the page content.
</div>

Answer 1

Добавьте

.item {
     padding: 0;
     margin: 0;
     position: relative;
}

к вашему CSS, а затем установите желаемые значения div для верхней части вашего изображения на position: absolute с top и bottom стилями по своему вкусу!

.item {
    padding: 0;
    margin: 0;
    position: relative;
}

.carousel-header-container { /* Content block 1 */
    position: absolute;
    width: 40%;
    height: auto;
    top: 20%;
    left: 20%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.carousel-content-row { /* Content block 2 */
    position: absolute;
    top: 75%;
    left: 0%;
    width: 100%; 
    height: 8em;
}

<div class="item">
    <img src="https://dummyimage.com/50x50" style="width:100%; height: 100%">

    <div class="carousel-header-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>

    <div class="carousel-content-row">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>
</div>

<div>
    This is the rest of the page content.
</div>

ПРИМЕЧАНИЕ. Я пропустил вашу часть медиазапроса, потому что это повлияет на скрипку.

Вы должны включить его для своих целей.

@media only screen and (max-width: 768px) {
    .carousel-header-container { /* Content block 1 */
        position: relative;
        width: 100%;
        height: auto;
        top: 0%;
        left: 0%;
        overflow: hidden;
    }
    .carousel-content-row { /* Content block 2 */
        position: relative; 
        width: 100%; 
        height: 5em;
    }
}

Answer 2

Вам нужно будет использовать position: absolute для достижения того, что вы хотите на рабочем столе.

Измените стиль в .carousel-header-container на position: absolute и поэкспериментируйте со свойством top, чтобы приспособиться к тому, что вы ищете.

Кроме того, вам не нужно повторять свойства с одинаковыми значениями в двух разделах .carousel-header-container. Вам нужно будет только переопределить значения, которые отличаются в разделе, предназначенном для мобильных устройств.