인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

Hun님의 프로필 이미지
Hun

작성한 질문수

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

스크롤 시 헤더 fixed에 관해 질문드립니다

작성

·

491

1

헤더를 상단 fixed할경우 이게 공중에 붕뜨는 것처럼 아래있던 intro섹션이 위로 끌려오게 되는데 intro 섹션에 padding-top을 줘서 header와 간격을 벌려주는게 맞는지 궁금합니다

    /* header */
    #header {
        positionfixed;
        top0;
        left0;
        width100%;
        z-index99;
    }
    .header-inner {
        marginauto;
        height100%;
        border1px solid #000;
    }
    nav {
        max-width1440px;
        text-alignright;
        height70px;
        line-height70px;
    }
    nav a {
        margin-right10px;
    }
        * {
            margin0;
            padding0;
        }
        a {
            text-decorationnone;
            color#fff;
        }
    #header {
    }
    #intro {
        height400px;
        padding-top70px;
        background-color#CCB9AF;
   }
    </style>
</head>
<body>
    <header id="header">
        <div class="header-inner">
            <nav>
                <a href="#intro">HOME</a>
                <a href="#about">ABOUT</a>
                <a href="#skills">SKILLS</a>
                <a href="#pratical">Pratical</a>
                <a href="#mobile">Mobile Web&App</a>
                <a href="#none">WebSite Publising</a>
              </nav>
        </div>
    </header>
    <section id="intro"></section>

답변 1

1

네. header에 포지션 absolute 또는 fixed가 되면 떠서 위치를 잡기 때문에 공간이 생겨서 아래 요소가 올라갑니다. 곧 intro 섹션이 올라가기 때문에 헤더의 높이 만큼 intro 섹션의 상단이 덜 보이게 됩니다. 

말씀하신 것처럼 intro 섹션에만 패딩 상단을 더 주어서 조절하시면 됩니다.

와...대박...그렇구나..

감사합니다!!!

Hun님의 프로필 이미지
Hun

작성한 질문수

질문하기