>웹 프론트엔드 >CSS 튜토리얼 >고정 헤더가 콘텐츠를 아래로 밀어내는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 헤더가 콘텐츠를 아래로 밀어내는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-16 15:32:18378검색

Why Does My Fixed Header Push Down My Content, and How Can I Fix It?

고정 헤더가 콘텐츠를 밀어내림

헤더에 페이지 제목과 탐색바 제목을 넣었는데 설정하자마자 위치:고정; 상단의 마진이 증가했습니다. Codepen 링크는 다음과 같습니다.

마진 축소 문제가 발생했습니다. 헤더를 고정한 후 이를 흐름에서 제거하면 양식이 첫 번째 유입 요소가 되므로 상단 여백이 본문의 상단 여백과 축소됩니다1. 이는 본문의 상단 여백이 크고 상단 값을 설정하지 않았으므로 고정 요소가 본체를 고려하여 배치된다는 의미입니다2.

이를 방지하려면 간단히 필요합니다. 여백 축소를 비활성화하거나(다른 문제를 피하기 위해 권장함) 최상위 값을 설정하여 요소를 원하는 위치로 이동합니다.

body {
 padding-top:1px; /*disable margin-collpasing*/
}

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

1 [본문에 여백이 설정되어 있지 않아 여백이 나타나지 않습니다. 요소와 본문 사이의 공간입니다. ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

2 [자세히 알아보기 이것은 이것에서 작동합니다 기사.](https://css-tricks.com/couple-margin-collapsing-gotchas/)

위 내용은 고정 헤더가 콘텐츠를 아래로 밀어내는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.