LAYOUT LAB / CANONICAL HTML + CSS

스크롤해도 보이는 헤더

Keep a header visible above a scrolling content region.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<header class="sticky_header">
    <nav aria-label="Repository"><a href="#">Code</a><a href="#">Issues</a><a href="#">Pull requests</a></nav>
</header>

<style>
.sticky_header {
    inset-block-start: 0;
    position: sticky;
    z-index: 1;
}

</style>
원문 가이드