[CSS] Div Position(static / relative / absolute / fixed / sticky)

IRISH·2023년 12월 23일

목록 보기

1/2

position 속성

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정
많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용

position 속의 기본값 = static
position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치
- 즉, HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻함
- top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됨

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있음
요소를 원래 위치를 기준으로 상대적(relative)으로 배치됨
- 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있음

absolute : position 속성값 중 가장 난해하고 주의해서 사용해야하는 속성값
- absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많음
position 속성을 absolute로 지정하면 사실 전혀 절대적(absolute)으로 요소를 배치해주지 않음
- 흥미롭게도 position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾음
  - DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정
    - 만약, 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됨
어떤 요소의 position 속성을 absolute로 설정하면, 부모 요소의 position 속성을 relative로 지정해주는 것이 관례

화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI 구성 시 많이 사용
- 보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법
- position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.
fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정

static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

#Software Engineer #IRISH