При расположении шапки абсолютно, ломается флекс-контейнер

Question

Начал делать макет, и при создании шапки сайта наткнулся на проблему: просто флекс-контейнер работает отлично, но когда я хочу сделать шапку абсолютной или фиксированной, всё ломается

В моём случае можно и не делать фиксированной, но просто на будущее как это делать?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>

<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
                <div class="header__row">
                    <a class="header__logo">
                        <img src="/imgs/logo.png" alt="Логотип">
                    </a>
                    <nav class="header__menu menu">
                        <a href="" class="menu__link">HOME</a>
                        <a href="" class="menu__link">FEATURES</a>
                        <a href="" class="menu__link">SUPPORT</a>
                        <a href="" class="menu__link">CONTACT US</a>
                    </nav>
                    <div class="header__button">
                        <a href="#" class="button button-blue">DOWNLOAD</a>
                    </div>
                </div>
            </div>
        </header>
        <main class="main"></main>
        <footer class="footer"></footer>
    </div>
    <script src="/js/script.js"></script>
</body>

</html>

SCSS:

.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body {
    color: #616161;
    font-size: 12px;
    font-family: Rubik;
}
.main {
    flex: 1 1 auto;
}

.header {
    //position: fixed; та самая строчка, из-за которой ломается флекс
    height: 114px;
    &__row {
        display: flex;
    }

    &__logo {
    }

    &__menu {
        flex: 1 1 auto;
        display: flex;
    }
    &__button {
        flex: 0 0 296px;
    }
}
.container {
    max-width: 1152px;
    margin: 0 auto;
}
.menu {
    &__link {
        font-weight: 700;
        font-style: italic;
        font-size: 10px;
        line-height: 12px;
        letter-spacing: 0.14em;
        color: #000000;
        margin: 0px 40px 0px 0px;
    }
}
.button {
    display: inline-block;
    padding: 12px 30px 16px 30px;
    font-weight: 700;
    font-style: italic;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.14em;
    color: #FCFDFE;
}
.button-blue {
    background: #4285F4;
    border-radius: 5px;
}

И если я внутрь .header добавлю position: absolute или position: relative, у меня как бы всё слипнется

Answer 1

тут самое главное понимать, что элементы с фиксированным и абсолютым позиционированием выпадают из потока – они практически не влияют на построение других блоков

Answer 2

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

И ничего не ломается)) как и с абсолютом указываем привязку. но уже относительно окна. ну и либо ширина по координатам, либо как вам и написали раньше width: 100%

Answer 3

Сейчас лучше использовать position: sticky для "липких" элементов.

.header {
  position: sticky;
  top: 0;
}

БЛОГ НА HUSL

При расположении шапки абсолютно, ломается флекс-контейнер

Ответы (3 шт):