CSS에서 부모 요소에 대한 상대적 위치 지정

요소에 relative가 지정되고, 그 자식 요소에 absolute가 지정되면, 이 자식 요소는 브라우저 창이 아닌 자신의 부모 요소를 기준으로 위치하게 됩니다.

일반적으로 이 경우 부모 요소에 오프셋 없이 relative를 지정합니다. 이렇게 하면 부모 요소 자체에는 아무런 변화가 없지만, 이제 그 모든 자식 요소들은 이 부모 요소를 기준으로 위치하게 됩니다.

예제를 통해 살펴보겠습니다.

예제

먼저, 위치 지정 없이 부모 블록과 자식 블록을 만들어 보겠습니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

예제

이제 녹색 블록에 절대 위치를 지정해 보겠습니다. 부모 요소에 relative가 지정되지 않았으므로, 자식 요소는 브라우저 창을 기준으로 위치하게 됩니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

예제

이제 부모 요소에 relative를 지정하겠습니다. 이 경우 자식 요소는 자신의 부모 요소를 기준으로 위치하게 됩니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

실습 과제

다음 과제에서 메인 블록은 margin 값을 auto로 설정하여 중앙에 배치되며, 다른 요소들은 position 속성을 사용하여 이 블록을 기준으로 위치합니다.