-
질문 & 답변
카테고리
-
세부 분야
취업 · 이직
-
해결 여부
미해결
스크롤 시 헤더 fixed에 관해 질문드립니다
21.06.13 01:17 작성 조회수 311
1
헤더를 상단 fixed할경우 이게 공중에 붕뜨는 것처럼 아래있던 intro섹션이 위로 끌려오게 되는데 intro 섹션에 padding-top을 줘서 header와 간격을 벌려주는게 맞는지 궁금합니다
/* header */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
}
.header-inner {
margin: auto;
height: 100%;
border: 1px solid #000;
}
nav {
max-width: 1440px;
text-align: right;
height: 70px;
line-height: 70px;
}
nav a {
margin-right: 10px;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
#header {
}
#intro {
height: 400px;
padding-top: 70px;
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
코딩웍스(Coding Works)
지식공유자2021.06.13
네. header에 포지션 absolute 또는 fixed가 되면 떠서 위치를 잡기 때문에 공간이 생겨서 아래 요소가 올라갑니다. 곧 intro 섹션이 올라가기 때문에 헤더의 높이 만큼 intro 섹션의 상단이 덜 보이게 됩니다.
말씀하신 것처럼 intro 섹션에만 패딩 상단을 더 주어서 조절하시면 됩니다.
답변 1