CSS로 컨테이너 하단에 요소 배치하는 방법 완벽 가이드

CSS만으로 부모 컨테이너의 맨 아래에 자식 요소를 배치하는 방법을 알아봅니다.

HTML은 부모-자식 관계 구조로 이루어져 있습니다. CSS에서 특정 요소를 컨테이너의 하단에 고정하려면 다음 속성과 값을 조합해 사용해야 합니다.

• position: relative; — 부모 요소에 적용
• position: absolute; — 자식 요소에 적용
• bottom: 0; — 자식 요소에 적용

기본 예제

먼저 HTML 구조는 다음과 같습니다.

<div class="parent">
  <div class="child">
  </div>
</div>

부모 요소에는 position: relative;를, 자식 요소에는 position: absolute;와 bottom: 0;을 지정합니다.

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
}

시각적으로 확인하기

동작 원리를 더 쉽게 이해할 수 있도록 위 클래스에 너비, 높이, 배경색을 추가한 예제입니다.

.parent {
  position: relative;
  background-color: black;
  height: 200px;
  width: 200px;
}

.child {
  position: absolute;
  bottom: 0;
  background-color: darkred;
  height: 50px;
  width: 50px;
}

위 코드를 실행하면 빨간색 자식 요소가 검은색 부모 컨테이너의 맨 아래에 붙어 있는 것을 확인할 수 있습니다.

요소가 왼쪽에 붙는 이유와 오른쪽 정렬 방법

위 예제에서 볼 수 있듯이, 자식 요소는 별도의 위치 지정이 없으면 자동으로 컨테이너의 왼쪽 하단에 고정됩니다. 이는 left 값이 지정되지 않아 브라우저 기본값(0)으로 처리되기 때문입니다.

만약 자식 요소를 오른쪽 하단에 배치하고 싶다면, 자식 요소에 right 속성을 직접 지정하면 됩니다.

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

이렇게 하면 자식 요소가 부모 컨테이너의 오른쪽 아래 모서리에 정확히 고정됩니다. 같은 원리로 left, top 속성을 조합하면 컨테이너 내 원하는 어느 위치든 자유롭게 배치할 수 있습니다.