position property 중 자주 쓰이는 relative, absolute에 대해 알아보겠습니다.

position: absolute;

position: absolute;는 기준에 대해 top, right, bottom, left property 값을 주어 요소를 원하는 위치로 이동할 수 있습니다.

.criterion {
  position: relative;
}

.absolute {
  position: absolute;
  top: 20px;
  left: 50px;
}

기준

기준에 대해 움직인다고 했는데 어떤 것이 기준이 될까요?

부모 tag 중 position property 값이(relative, absolute 등) 존재한다면 기준이 됩니다.

일반적으로 기준으로 쓸 부모 tag에 position: relative; 을 부여합니다.

position: fixed;

.fixed {
  position: fixed;
  right: 0;
  bottom: 0;
}

position: fixed;는 absolute와는 다르게 기준을 설정 할 필요가 없습니다.

어디에 고정될까요?

눈에 보이는 브라우저 화면에 고정된 위치 하게됩니다.
화면을 줄이면 줄인 화면의 위치에, 키우면 키운 화면의 위치에 고정됩니다.