Как разместить header поверх section?

Question

[s1vemod]

Добрый день. Взялся верстать макет, но не совсем понимаю, как правильно разместить шапку поверх section.
Потому что логически - это два отдельных элемента.



Подскажите, как разместить шапку поверх данного блока?
Учитывая то, что картинка на фоне - относится к section. Или это можно реализовать иначе?

Не хочу всё это пихать в header.

Comments

[iBird Rose]

что тебе мешает обернуть эти 2 блока в какую-то обертку и задать фон уже этой обертке?

[s1vemod]

> в какую-то обертку

В div?

[Danil Klimov]

Если header должен быть фиксирован при скролле, то делаете ему:

.header {
  position: fixed;
  width: 100%;
}

Если не фиксированный то можно хэдеру дать отрицательный нижний отступ равный его высоте

[Максим]

s1vemod, https://codepen.io/topicstarter/pen/GRNzBVY

[s1vemod]

Максим Ленский, А остальной контент - куда я должен девать?

[Максим]

s1vemod, я то откуда знаю - согласно макета

[Максим]

s1vemod, я же ссылку скинул - вот так и делайте - можно вообще без абсолютов чисто гридами

Answer 1

[Danil Klimov]

Вариант 1
Вариант 2