[css] position

kcs·2022년 11월 2일

static

default,

relative

원래 위치하는 element에서 위치를 수정할 수 있다.
수정하는 수단은 top, left, right, bottom
다른 엘리먼트에 영향을 준다.

absolute

원래 위치하는 element에서 위치를 수정할 수 있다.
수정하는 수단은 top, left, right, bottom
다른 엘리먼트에 영향을 주지 않는다.

fixed

스크롤해도 고정된 위치에 보인다.
ex) 네비게이션 헤더

sticky

일정 스크롤 위치에 도달할 때 까지는 스태틱인데 일정 스크롤이동이 생기면
fixed가 된다.

relative vs absolute 차이점

relative는 다른 엘리먼트의 레이아웃에 영향을 준다.
absolute는 영향을 주지 않는다,

fixed vs sticky 차이점

fixed는 항상 같은 위치에 있다.
sticky는 일정 스크롤전에는 static이지만 일정 스크롤 이상 이동하면 fixed로 작동한다

profile
프론트엔드 개발자

0개의 댓글