'위치: 고정;'을 설정한 후 고정 헤더가 아래쪽으로 이동하는 이유는 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-10 19:17:14

원래의

500명이 탐색했습니다.

Why Does My Fixed Header Shift Downward After Setting `position: fixed;`?

제목 표시줄을 고정으로 설정했는데 왜 아래로 이동하나요?

질문 내용

제목 표시줄이 페이지 제목과 탐색 표시줄 사이에 위치하는데 위치:고정으로 설정하면 여백이 늘어났습니다. . 다음은 Codepen 링크입니다.

[Codepen 링크]

질문 답변

Margin Collapse라는 문제가 발생했습니다. 문제. 제목 표시줄을 고정으로 설정하면 일반 문서 흐름에서 벗어납니다. 따라서 양식은 첫 번째 일반 문서 흐름 요소가 됩니다. 이는 양식의 상단 여백이 접혀 본문 요소의 상단 여백과 겹친다는 것을 의미합니다. ¹

이는 body 요소의 상단 여백이 더 크고 고정 요소가 상단 값을 설정하지 않았기 때문에 body를 기준으로 배치된다는 의미입니다. ²

이 상황을 방지하려면 다음 방법을 선택할 수 있습니다.

여백 접기 비활성화(권장): 이렇게 하면 됩니다. 마진 붕괴 및 기타 여러 문제.
상위 값 설정: 제목 표시줄을 원하는 위치로 이동합니다.

해결된 코드:

< pre>

body {
padding-top:1px; /여백 접기 비활성화/
}

#header{

background-color:#191919;
height:3rem;
width:100%;
position:fixed;

로그인 후 복사

}

header-img{

글꼴 계열: '영구 마커', 필기체;
색상:흰색;
여백-왼쪽:1.5rem;
부동:왼쪽;
글꼴 크기:25px;
}
ul{
목록 스타일: 없음;
디스플레이:플렉스;
흐름 방향:행;
justify-content:space-around;
}

nav-bar{

background-color:#191919;
float:left;
width:100%;
}

form{

margin-top:45rem;
margin-left:25%;
margin-right:25%;
}

img{
너비:70%;
높이:70%;
}

a {
텍스트 장식:없음;
글꼴 계열: 'Work Sans', 필기체;
색상: 흰색;
글꼴 크기:12px;
}

이메일{

너비:100%;
box-shadow:3px 3px 5px grey;
}

제출{

font-family:'Roboto', 필기체;
글꼴 크기:14px;
글꼴 무게:bold;
색상:#686868;
상자 그림자:3px 3px 5px grey;
패딩: 5px 5px;
}

.catalog{
margin-left:10%;
margin-right:10%;
margin-top: 5rem;
너비:90%;
float:left;
}

password{

width:100%;
box-shadow:3px 3px 5px grey;
}

동영상{

margin-top:5rem;
margin-left:25%;
margin-right:25%;
width:50%;
}

코스{

display:flex;
flow-direction:row;
flex-wrap:wrap;
}

설명{

글꼴군: 'Oswald', 필기체;
글꼴 크기: 20px;
텍스트 정렬:center;
글꼴 크기:16px;
}

li{
패딩: .25rem .5rem;
}

a:hover{
color:#4ba0c8;
}

.nav-link{

}

.course-label{
글꼴 계열: 'Baloo Bhaijaan', 필기체;
글꼴 크기:18px;
}

.images{

background-color:#191919;
height:3rem;
width:100%;
position:fixed;

로그인 후 복사

}

.images:hover{
배경색:#99d3ff;
color:#99d3ff;
}

@media(최소 너비:555px){
#nav-bar{

margin: 5% 5%;
padding: 3% 3%;
width: 10vw;
height:10vw;
color:#d2d2d2;

로그인 후 복사

}

#form{

float:right;
width:20rem;
margin-right:1rem;

로그인 후 복사

}
}
@media(최소 너비:360px) {
아{

margin-top:5rem;

로그인 후 복사

}
#description{

font-size:16px;

로그인 후 복사

}
#header-img{

font-size:20px;

로그인 후 복사

}
#header{

font-size:30px;

로그인 후 복사

}
}

 <h1> <nav id="nav-bar"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height:4.5rem;

로그인 후 복사

< div>