집 >웹 프론트엔드 >CSS 튜토리얼 >'위치: 고정;'을 설정한 후 고정 헤더가 아래쪽으로 이동하는 이유는 무엇입니까?

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

Mary-Kate Olsen원래의: 2024-12-10 19:17:14482검색

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>
<pre class="brush:php;toolbar:false">height:4.5rem;

< div>

위 내용은 '위치: 고정;'을 설정한 후 고정 헤더가 아래쪽으로 이동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Float for class display position margin padding background flex input ul li

성명：

이전 기사：순수 JavaScript만 사용하여 크기 조정 가능한 HTML 요소를 어떻게 만들 수 있습니까?다음 기사：순수 JavaScript만 사용하여 크기 조정 가능한 HTML 요소를 어떻게 만들 수 있습니까?