CSS position: 기본위치, 상대위치, 절대위치, 고정위치

Last Update: 2020-03-25

css의 position속성에는 static, relative, absolute, fixed가 있습니다.
이 속성들의 특징과 css의 top, left속성을 이용한 위치이동시 어떤 방식으로 이동하는지 알아보겠습니다.

static

static은 모든 요소에 기본적으로 설정된 값입니다.

relative

relative 속성은 두가지 특징이 있습니다.

  1. relative 속성을 가진 요소가 static일때 있던 공간을 다른 요소가 침범하지 못한다.
  2. relative 속성을 가진 요소가 자신의 static일때 위치를 기준으로 움직인다.

예시

.example {
    position: relative;
    top: 5px;
    right: 4px;
}

위의 예시의 경우 .example은 원래자신의 위치중 오른쪽 위 꼭짓점을 기준으로 아래로 5px, 왼쪽으로 4px 이동합니다.

absolute

절대위치로 설정된 절대요소는 다음과 같은 속성을 갖게 됩니다.

  1. static 위치설정이 아닌 부모요소중 가장 가까운 부모를 기준으로 위치를 설정한다.
  2. 절대요소 자신이 원래 위치해 있던 공간에 다른 요소가 침범할 수 있다.

예시

.example {
    position: absolute;
    top: 5px;
    right: 5px;
}

fixed

고정위치로 설정된 고정요소들은 다음과 같은 속성을 갖게 됩니다.

  1. 고정요소 자신이 원래 위치하던 공간에 다른 요소가 침범할 수 있다.
  2. 웹브라우저 화변을 기준으로 위치를 이동하며, 스크롤해도 고정되어있다.