[ Web : CSS ] positon

position

positon property는 요소의 위치를 결정하는 속성이다. top, bottom, left, right 속성들을 함께 사용하여 요소의 위치를 지정할 수 있다.

position property의 값으로는 아래 다섯개의 값을 가질 수 있다.

 

1. static

2. relative

3. absolute

4. fixed

5. sticky

 

position 속성의 각 값들에 대해 살펴볼 것이다.

 

1. static

static은 position 속성의 기본 값으로 position 속성값을 지정하지 않았을 때와 같다. 일반적으로 요소 배치 순서에 따라 배치되며 bottom, left, top, right, z-index속성들에 대해 아무런 영향을 받지 않는다. 

따라서 static은 왼쪽에서 오른쪽, 위에서 아래로 배치되며, 부모 요소 내의 자식 요소로 존재할 경우 부모 요소의 위치를 기준으로 배치된다.

 

2. relative

relative는 요소를 문서의 흐름에 따라 배치를 한다. static과 다르게 자기 자신을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다. 그렇기 때문에 페이지 레이아웃에서 요소가 차지하는 공간은 static일때와 동일하다. static과 relative의 차이는 좌표 프로퍼티(right, top, bottom, left)의 동작 여부 뿐이다.

 

3. absolute

relative와 static과 다르게 요소가 일반적인 문서의 흐름에 따라 위치하지 않는다. 부모 요소 또는 가장 가까이 있는 조상 요소 (static 제외) 를 기준으로 좌표 프로퍼티 ( top, bottom, right, left )만큼 이동한다. 즉, position이 relative, absolute, fixed 로 선언되어 있는 가장 가까운 부모 또는 조상 요소를 기준으로 요소의 위치가 결정된다.

만약 부모 또는 조상 요소가 static인 경우 body tag를 기준으로 위치하게 된다. 

다른 요소가 먼저 위치를 점유하고 있더라도 뒤로 밀리지않고 위에 덮어씌운다. ( 이런 특성을 부유 또는 부유 객체라고 한다. )

 

4. fixed 

부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티( top, bottom, right, left )을 사용하여 위치를 이동시킨다. 

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

아래 사진의 빨간네모에 위치한 버튼 처럼 항상 고정된 자리에 위치하는 것들은 fixed를 사용하면 된다.

예시

5. sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤되는 조사오가 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.

➡️ 많이 사용해본 적이 없어서 잘 이해가 가지 않는다. 다음에 더 자세히 알아봐야 겠다.