TIL - Position의 속성 : relative, absolute, fixed

박지훈·2022년 3월 1일
0

HTML/CSS

목록 보기
2/4

1. Position

Position 속성은 HTML 요소가 위치를 결정하는 방식을 설정한다.
CSS에서 요소의 위치를 결정하는 방식엔 4가지 방식이 있다. - static, relative, absolute, fixed

2. Position의 4가지 지정 방식

a. static :

단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식 (기본 설정값)
앞 영역에 의해 위치가 결정됨

b. relative :

static과 동일하게 앞 영역에 의해 위치 결정
top, bottom, left, right를 이용한 위치 조정 가능

c. absolute :

position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.
top, bottom, left, right를 이용한 위치 조정 가능
부모 중에 포지션이 relative, absolute, fixed가 없다면 가장 위의 태그(body)가 기준이 된다.

d. fixed :

브라우저 상 위치가 고정된 포지션을 설정하기 위해 쓰인다. (스크롤해도 고정된 위치에 표시 가능)
absolute와 달리 부모가 따로 필요없다.

0개의 댓글