Position 사용법 - position이란?

 

Position 속성 4가지

• static
• relative
• fixed
• absolute

 

1. Static

따로 정하지 않아도 모든 박스(태그)들은 position:static으로 지정되어있다.

태그를 작성한 순서대로, 위에서 아래로~ 왼쪽에서 오른쪽으로~ 배치되는 특징이 있다.

 

2. Relative

현재위치(static)를 기준으로 좌표속성을 사용하여 위치를 이동시킨다.(top, bottom, left, right)

 

좌표속성(offset)

top : 10px	위에서부터 10px 만큼 아래로이동
left : 10px	왼쪽에서부터 10px 만큼 오른쪽으로 이동
bottom : 10px	아래에서부터 10px 만큼 위로이동
right : 10px	오른쪽에서부터 10px 만큼 왼쪽으로 이동

 

3. Fixed

브라우저의 화면을 기준으로 좌표속성을 사용하여 위치를 이동시킨다. (top, bottom, left, right)

< 특징 >

- 브라우저 화면을 기준으로 움직인다.
- 기존 배치에서 벗어난다.
- 남은 자리를 다른 태그가 차지한다.

 

fixed는 스크롤을 해도 위치가 고정되어 있는 박스를 만들 때 사용된다.

 

4. Absolute

relative, absolute, fixed가 선언되어 있는 상위태그를 기준으로 좌표속성을 사용하여 위치를 이동시킨다.(top, bottom, left, right)

 

 

웹개발 [프론트엔드] 입문 강의 14강. 포지션(position) - 박스 위치를 마음대로 바꾸자!