CSS에서 고정 위치 지정

이제 고정 위치 지정에 대해 알아보겠습니다. 고정 위치 지정은 절대 위치 지정과 유사하지만, 스크롤바가 있을 때 이 두 위치 지정 유형의 동작 방식에서 차이가 나타납니다.

페이지를 스크롤할 때 절대 위치가 지정된 요소들은 페이지와 함께 스크롤됩니다. 예제를 확인해 보세요:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

페이지를 스크롤할 때 위치가 지정된 요소가 제자리에 머물도록 할 수 있습니다. 이를 위해서는 position 속성을 값 fixed로 설정하여 고정 위치를 지정해야 합니다:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* 고정 위치 지정 */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: