CSS Position 속성 (static, relative, absolute, fixed)

Position 속성

position 속성은 요소의 위치를 정의한다. top, bottom, left, right 속성과 함께 사용하여 위치를 지정한다.

position 속성의 값으로 static(기본 값), relative(상대 위치), absolute(절대 위치), fixed(고정 위치)

static (기본 위치)

static은 position 속성의 기본 값으로 position 속성을 지정하지 않았을 때와 같다.

기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.

기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다.

좌표 속성(top, bottom, left, right)를 같이 사용할 수 없다. 해당 속성을 적으면 무시된다.

static 속성값을 가진 요소에만 z-index 속성이 적용된다.

relative(상대 위치)

기본 위치를 기준으로 좌표 속성(top, bottom, left, right)을 사용하여 위치를 이동시킨다. static을 선언한 요소와 releative를 선언한 요소의 차이점은 좌표 속성의 동작 여부뿐이다. 그 외는 동일하게 동작한다.

absolute(절대 위치)

부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 속성(top, bottom, left, right)만큼 이동한다. 즉, relative, absolute, fixed 속성이 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다.

만일 부모 또는 조상 요소가 static인 경우, document body를 기준으로 하여 좌표 속성대로 위치하게 된다.

따라서 부모 요소를 배치의 기준으로 삼으려면 부모 요소에 relative를 정의해야 한다.

이때 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. 이런 특성을 부유 또는 부유 객체라 한다.

absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정해야 한다.

relative 속성과 absolute 속성의 차이점은 아래와 같다.

• relative 속성은 기본 위치(static으로 지정되었을 때 위치)를 기준으로 좌표 속성(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 따라서 무조건 부모를 기준으로 위치하게 된다.
• absolute 속성은 부모에 static 이외의 position 속성이 지정되어 있을 경우에만 부모를 기준으로 위치하게 된다. 만일 부모, 조상이 모두 static 속성일 경우, document body를 기준으로 위치하게 된다.
• 따라서 absolute 속성 요소는 부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있다.
  • absolute나 releative나 위치는 설정해주기 나름이니 부모 요소의 영역을 아무렇게나 벗어날 수 있다. 이 문장은 absolute 속성 값이 적용된 요소가 부모의 기준에서 보다 쉽게 벗어날 수 있다는 것을 뜻하는 것 같다.

🎈 자식 요소가 부모 요소의 영역을 벗어나면 어떻게 될까?

• overflow 속성은 자식 요소가 부모 요소의 영역을 벗어났을 때 처리 방법을 정의한다.
  • visible → 영역을 벗어난 부분을 표시한다 (기본 값)
  • hidden → 영역을 벗어난 부분을 잘라내어 보이지 않게 한다.
  • scroll → 영역을 벗어난 부분이 없어도 스크롤 표시한다.
  • auto → 영역을 벗어난 부분이 있을 때만 스크롤 표시한다. 현재 대부분 브라우저는 auto와 동일하게 작동한다.

fixed(고정 위치)

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

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳(브라우저 창에서 보이는 부분 = viewport)에 위치한다.

fixed 속성 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정해야 한다.

---

참고 및 출처

• https://poiemaweb.com/css3-position