위치 지정(Positioning)

position 속성은 웹 페이지 내 HTML 요소의 위치 배치 방식을 결정합니다.

Static 위치 지정

static은 모든 요소의 기본 배치 방식입니다. 별도로 위치를 지정하지 않으면 요소는 원래 순서대로 자동으로 배치됩니다.

CSS
.box {
  position: static;
}

Relative 위치 지정

relative는 요소의 원래 위치 기준 상대적으로 이동합니다. 예를 들어 아래 CSS box 클래스는 클래스가 적용된 요소를 20px만큼 좌측으로, 10px만큼 위로 이동시킵니다.

CSS
.box {
  position: relative;
  left: 20px;
  top: 10px;
}

Absolute 위치 지정

absolute는 가장 가까운 position: static이 아닌 부모 요소를 기준으로 위치가 결정돼요. 해당되는 부모 요소가 없다면 웹 페이지의 body를 기준으로 위치를 결정합니다.

CSS
.box {
  position: absolute;
  top: 50px;
  right: 30px;
}

Fixed 위치 지정

fixed는 브라우저 창에 대해 고정된 위치를 가져요. 페이지를 스크롤 해도 HTML 요소의 위치가 변하지 않아, 스크롤을 따라다니는 버튼(Floating Button)이나 header의 내비게이션 바(Navigation Bar)를 만들 때 자주 사용합니다.

CSS
.box {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

Sticky 위치 지정

sticky는 상대적으로 움직이다가, 특정 지점에 도달하면 HTML 요소를 일정 위치에 고정해요. 테이블의 header 행, sidebar 컨텐츠 등을 고정시킬 때 자주 사용합니다.

CSS
.box {
  position: sticky;
  top: 0;
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!