Как правильно спозиционировать элементы для вертикального слайдера?

Question

[Максим Варава]

Добрый день, кто подскажет как правильно сделать:
Есть главный экран, типа такого

Смысл такой, что на главном экране должен быть горизонтальный слайдер, который должен менять бекгрануд главного экрана и заголовок с текстом в центре(шапка, контакты и.д. меняться не должны). Структура сайта примерно такая

<section id="section-1" class="main">
    <header></header>
    <div class="main-content"</div>
    <div class="social"</div>
</section>

.main {
    background: #cecece url(/img/background.jpg) no-repeat center center;
    background-size: cover;
    width: 100%
    height: 100vh;
}

Так вот вопрос в том, как лучше спозиционировать элементы, что бы можно было бекграунд и слоган с текстом закинуть в отдельный блок со слайдером, но так что бы он не нарушил структуру сайта?

Comments

[boga-net]

Максим Варава
Я бы сделал так :
Секции position relative,
Хэдер и сошиал в один див, слайдер с заголовком в другой див.
Обоим элементам задал абсолютное позиционирование и ширину и высоту в 100%. Ну и спозиционировать их соответственно.
Статичные элементы с z-indexom были бы наверху, в то время как слайдер менял бэкграунд и заголовок. Но это в теории, на практике - надо смотреть. Поэтому пишу не в ответе.

[Максим Варава]

boga-net, Спасибо за совет, были подобные идеи, но тоже не знаю насколько это правильно )

[boga-net]

Максим Варава, ок, какие ещё есть варианты? В любом случае случае нужна вложенность, если не хотите дублировать меню и форму в каждом слайде. Если вложенность, то абсолютное позиционирование, чтобы одни элементы были поверх других. Пока что в голову ничего больше не приходит

[Максим Варава]

boga-net, Буду значить пробовать так, спасибо ;)

Answer 1

[Дмитрий]

обертку делать высотой height: 100vh;
хедер абсолютом, форму абсолютом, слайдер 100vh