Sidebar CSS Sticky 포지션으로 상단 고정
Sticky 포지션을 이용하여 사이드바를 화면에 고정하는 방법
을 소개합니다.레이아웃 구성
PC 화면에 적합하다고 생각하는 3단 레이아웃을 구상하였습니다. 아래 그림에서 배경색을 표시한 상단 메뉴바와, 왼쪽 사이바 부분의 일부 영역은 스크롤을 내리면 화면에 고정하도록 구상을 하였습니다.
Sticky Position 사용 방법 및 주의 사항
사용방법
스크롤에 따라 화면에 고정되는 Sticky 속성은 아래 코드와 같이 Position 속성과 top, bottom, left, right와 같은 위치 속성 두 가지가 입력되어야 합니다.
.sticky-box{
position: sticky;
top: 0px;
}주의 사항
- 부모 요소 안에서만 sticky 적용
- 부모 요쇼중에
overflow:auto,overflow:hidden,overflow:scroll속성이 적용 되어 있는 경우 sticky 사용 불가 - IE 지원 하지 않음
Sticky 속성 적용하기
사이드바 일부 영역 Sticky 적용
위의 레이아웃 구조를 만든 후에 Sticky로 동작할 div 요소만 position: sticky; 속성과 top:0px 속성을 지정하면 편리하게 스크롤에 따라 고정되는 사이드바를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
header,
nav,
div,
aside,
section,
footer{
border:solid 1px black;
margin:5px;
font-size:24px;
text-align: center;
}
nav{
background-color:yellow;
}
main{
display:flex;
}
aside,
section{
flex-grow: 1;
height:1200px;
}
.notSticky_box{
height:400px;
}
.sticky_box{
position:sticky;
top:0px;
height:500px;
background-color: chartreuse;
}
footer{
height:300px;
background-color:black;
}
</style>
</head>
<body>
<header>Header</header>
<nav>Nav</nav>
<div class="topAdd">Ads</div>
<div class="title">Title</div>
<main>
<aside>Sidebar Left
<div class="notSticky_box">General Div Box</div>
<div class="sticky_box">Position Sticky Box</div>
</aside>
<section>Section</section>
<aside>Sidebar Right</aside>
</main>
<footer>footer</footer>
</body>
</html>
상단 메뉴바와 사이드바 Sticky 동시 적용
상단 메뉴바와 사이드바 일부 영역을 동시에 Sticky 속성을 부여하기 위해 <Style> 태그 내의 nav 선택자와 .sticky_box 선택자의 코드를 수정합니다.
nav{
position:sticky;
top:0px;
background-color:yellow;
}
.sticky_box{
position:sticky;
top:36px; /* nav의 높이 */
height:500px;
background-color: chartreuse;
}위의 코드를 실행하면 아래와 같이 잘 되는 듯 보이나 우측 그림처럼 스크롤이 하단으로 내려가면 사이드바의 Sticky 여력이 Nav 위로 올라가는 문제가 있습니다.
HTML 요소가 겹치는 경우 화면으로 보이는 앞뒤 우선순위를 결정하는 것은 CSS z-index 속성입니다. 위 코드에서 z-dinex 속성을 추가하여 최종적으로 코드를 수정하면 원하는 결과의 레이아웃을 만들 수 있습니다. 최종 코드는 아래와 같습니다.
- z-index 속성 : 요소의 z 축 위치를 결정
- 숫자가 클수록 화면 앞으로 위치
- z-index 속성 지정하지 않은 경우 '0'으로 인식
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
header,
nav,
div,
aside,
section,
footer{
border:solid 1px black;
margin:5px;
font-size:24px;
text-align: center;
}
nav{
position:sticky;
top:0px;
background-color:yellow;
z-index: 10;
}
main{
display:flex;
}
aside,
section{
flex-grow: 1;
height:1200px;
}
.notSticky_box{
height:400px;
}
.sticky_box{
position:sticky;
top:36px;
height:500px;
background-color: chartreuse;
z-index:1;
}
footer{
height:300px;
background-color:black;
color:white;
}
</style>
</head>
<body>
<header>Header</header>
<nav>Nav</nav>
<div class="topAdd">Ads</div>
<div class="title">Title</div>
<main>
<aside>Sidebar Left
<div class="notSticky_box">General Div Box</div>
<div class="sticky_box">Position Sticky Box</div>
</aside>
<section>Section</section>
<aside>Sidebar Right</aside>
</main>
<footer>footer</footer>
</body>
</html>
마무리
이번 포스트는 CSS Sticky 속성을 사용하여 사이드바를 상단 고정하는 방법에 대해 설명하였습니다. 추가적으로 상단 메뉴바와 함께 Sticky 속성을 사용하고, z-index를 사용하여 z 축 우선순위를 결정하는 법도 함께 알아보았습니다.
'Tistory' 카테고리의 다른 글
| 일치하는 콘텐츠 목록 특정 글 고정 또는 차단 설정 및 기간 설정 (6) | 2020.12.14 |
|---|---|
| 티스토리 highlight.js 설정 및 Syntax Highlight 플러그인 언어 추가 (0) | 2020.12.01 |
| #6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정 (0) | 2020.11.26 |
| #5 CSS Flex 로 반응형 3단 레이아웃 구성하기 (0) | 2020.11.25 |
| #4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기 (0) | 2020.11.25 |