1. position속성 - relative, absolute, fixed

Kim jeong ho·2020년 6월 23일
0

position

'자리'의 의미
속성값으로 relative, absolute, static, sticky,fixed가 있다.
position은 레이아웃을 배치하거나 객체를 위치시킬 때 사용한다.

relative

'상대위치'이다. 각각의 태그가 기존 static이었을 때 기준으로
상하좌우 방향으로 본인이 지정한만큼 (%, px) 이동한다.
기존 위치에서 이동하고 싶을 때 사용한다.

absolute

'절대위치'이다.
부모의 포지션이 static(디폴트값)이라면 body기준으로 절대위치
부모의 포지션이 relative(상대위치)라면 '부모기준'으로 절대위치
가장 가까운 곳에 위치한 position:relative;를 가진 조상(부모)요소의 fixed와 비슷하게 동작한다.

fixed

화면상의 절대위치, 스크롤바를 내려도 그 자리에 있는 것을 확인할 수 있다.
top, right, bottom, left값을 주어서 원하는 곳에 고정시킬 수 있다.

static

디폴트값 (위치가 지정되어있지 않음)
position 속성을 부여하지 않았을 때 디폴트 값이다.

profile
김정호

0개의 댓글

관련 채용 정보