사용하는 이유

웹 제작을 하며 레이아웃을 배치하거나 객체 위치를 변경해야 하는 경우가 있는데, html/css에서는 객체가 xy좌표계 상에 위치하고 있는 것처럼 다룬다.

ex) 상하좌우 방향으로 객체가 이동하길 원하는 만큼 픽셀단위로 'top:100px,left:50px'와 같이 값을 주는 식

이때 좌표계 개념을 사용하는 만큼, '왼쪽으로 50px 이동시킨다'라고 했을 때 어디를 기준으로 50px 만큼 이동시킬 것인지 그 기준점을 명확히하는 것이 중요하다.

객체마다 좌표계 기준점을 부여하고자 사용하는 개념이 바로 position 속성이다.

개별 속성 설명

css를 통해, 객체에게 position 속성인 [static/relative/absolute/fixed]중 하나를 부여하면, 그에 맞게 좌표계 기준점이 달라진다. 아무것도 부여하지 않았을 경우 디폴트 값은 static이다.

ex) position:relative; position:fixed; 이런식으로 부여함

1. static
   부모요소의 좌상단을 기준점으로 위->아래, 왼쪽->오른쪽으로 객체가 배치된다. (html로 코드를 작성한 순서대로 객체 사이즈에 따라 순차적으로 쌓이는 식) 'position:static;'이라고 코드를 작성하지 않았어도, 기본적으로 모든 객체의 기본 설정값은 'static'상태임

2. relative
   객체에게 relative를 부여하는 순간, 그 객체의 현재 위치가 곧 (0,0) 기준점이 된다.

3. absolute
   상위요소의 좌상단을 기준점으로 만드는 속성임. 이때 기준이 되는 상위요소의 position속성은 static이 아니어야 한다. 기본적인 position상태는 디폴트 값인 static이므로, absolute를 사용하고자 이를 바꿔주는 작업이 필요한데, 보통 간단하게 부모요소에 position:relative;를 부여하면 끝임.

4. fixed
   쉽게 말하면 실물 컴퓨터 화면 좌상단이 기준점이 된다. 마우스 스크롤을 움직여도 항상 같은 자리에 고정되어있는 top버튼('맨 위로'버튼)이나 메뉴바를 구현할 때 사용함.