Блок не встает на свое место, как исправить?

Question

[Андрей Гильгенберг]

Написал верхнее меню, добавил картинку, все шло хорошо. Следующий блок оказался за картинкой и его не видно. Не понимаю почему

html(lang='ru')
    head
        meta(charset='utf-8')
        title Test
    body
        header
    nav(class='header__menu')
        a(href="index.pug")
            img(src='../img/logo.png' class='main__logo' )
        .link__container
            a(class='header__link' href='#') the problem 
            span(class='header__link') |
            a(class='header__link' href='#') PiedPiperCoin
            span(class='header__link') |
            a(class='header__link' href='#') the team
        .photo__container
            img(src="../img/Jumbotron.png" class="header__photo")
    .main__container
        h1 The Problem

@import 'null';
@import 'fonts';

$header_color: #007765;
$link_fonts: 'Roboto-Medium';

body{
    max-width: 1219px;
    background-color: #EEEEEE;

}

header {
    margin: auto 59px;
    background-color: $header_color;
    font-family: $link_fonts;


    .main__logo{
        width: 180px;
        height: 40px;
        position: relative;
        top: 20px;
        left: 20px;
        cursor: pointer;
        
        

    }
    .link__container{
        margin-right: 49px;
        position: relative;
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
        .header__link{
            padding-right: 6px;
            color: #fff;
            font-size: 22px;
            position: relative;
            bottom: 28px;
        }
    }

    .photo__container{
        position: relative;


        .header__photo {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: auto;
          }
    }
}

.main__container{
    margin: auto 59px;
    h1{
        color: $header_color;
        font-size: 30px;
    }
}

Answer 1

[Ilya Olovyannikov]

Вложи nav внутрь body

Comments

[Андрей Гильгенберг]

С этим все нормально, я просто инклюдами паг подключаю, поэтому тут разметка слетела немного, DOM в качестве доказательства

[Андрей Гильгенберг]

Вообще, див header__photo при инспектировании не показывает, что img в него вложенно

[Ilya Olovyannikov]

Андрей Гильгенберг, Есть вероятность, что картинка очень большая и позиционируется абсолютно, соответственно она перекрывает контент.

[Андрей Гильгенберг]

Ilya Olovyannikov, Я как понимаю, нет, ибо под ней пространства полно
А у меня блок себя ведет, как будто этой картинки нет вовсе

[Ilya Olovyannikov]

Андрей Гильгенберг, да. У тебя абсолютная картинка. Сделай img z-index: -1 и убедись в этом.

[Андрей Гильгенберг]

Ilya Olovyannikov, да, благодаря z-index дошло, поменял на relative и все стало нормально
абсолют поставил, потому что где-то вычитал пример адаптива картинки и просто от туда скопировал, странно, с релативом ничего не изменилось(в адаптивности)
Спасибо тебе большое!