position

요소를 배치하는 방법

static

포지션의 기본값으로 html 상의 위치

.box{
	position : static; /* 디폴트값으로 생략가능 */
}

relative

static 자리를 기준으로 이동
적용되지 않은 다른 요소들의 위치에 영향을 끼치지 않음(영역을 침범한다면 겹치게 표현)

.box{
	position : relative; /*원래의 자리에서 위아래 20px씩 이동*/
	left: 20px;
    top: 20px;
}

absolute

부모 태그의 위치를 기준으로 요소의 위치를 결정

.box{
    position : absolute;
    top: 50%;
    width: 100%; 
    /* 중앙에 위치할때 표현 */
}

fixed

뷰포트 기준으로 위치를 고정
-> 스크롤 해도 위치가 고정

.box{
	position: fixed;
    bottom: 0;
    right: 0;
}

sticky

스크롤한 상태에서 위치 고정
-> 스크롤 내렸을 때, relative + fixed 상태

.box{
	position : sticky;
    top: 20px;
	/* 스크롤된 화면에서 위치하는 곳 지정 */
}

스크롤 내렸을 때 기존 위치와 동일한 위치로 고정된 것은 fixed
스크롤 내렸을 때 위치 변경된 상태로 고정된 것은 sticky