position

좀 더 복잡한 레이아웃을 만들기 위해서는 position 프로퍼티에 관해 살펴볼 필요가 있습니다. position 프로퍼티에는 다양한 값을 설정할 수 있으며, 각 값의 이름은 제대로 지어지지 않아서 기억하기가 불가능합니다. 그럼 지금부터 하나씩 살펴보기로 하고, 이 페이지를 즐겨찾기에 추가해 둬야 할 수도 있습니다.

static

.static {
  position: static;
}

static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다.

</div>

상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것입니다.

</div>

fixed

안녕하세요! 아직은 저한테 관심을 보이지 마세요.

</div>

고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다.

페이지의 우측 하단 구석에 고정된 엘리먼트가 있다는 사실을 눈치채셨을 겁니다. 이 엘리먼트를 눈여겨보세요. 다음은 이 엘리먼트를 그 자리에 놓이게 만든 CSS 코드입니다.

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않습니다.

모바일 브라우저의 경우 고정 엘리먼트 지원이 굉장히 불안정합니다. 이와 관련된 사항은 이곳에서 좀 더 자세히 확인하실 수 있습니다.

absolute

absolute는 가장 다루기 까다로운 위치 지정 값입니다. absolute는 뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다. "위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킨다는 사실을 기억하세요.

다음은 간단한 예제입니다.

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

이 엘리먼트는 상대 위치가 지정돼 있습니다. 이 엘리먼트가 position: static;이었다면 절대 위치가 지정된 자식 엘리먼트는 이 엘리먼트에서 빠져나와 문서 본문을 기준으로 상대 위치가 지정됐을 것입니다.

이 엘리먼트에는 절대 위치가 지정돼 있습니다. 부모 엘리먼트를 기준으로 상대 위치가 정해져 있지요.

</div>

여기서 배운 내용은 꽤나 까다롭지만 멋진 CSS 레이아웃을 만드는 데 필수적인 내용입니다. 다음 페이지에서는 좀 더 실전 예제에서 position을 사용해 보겠습니다.

이전 다음