CSS를 사용하여 컨테이너의 맨 아래에 요소를 배치하는 방법

CSS를 사용하여 컨테이너 하단에 요소를 배치하는 방법을 알아보세요.

HTML에는 부모-자식 관계가 있습니다. CSS를 사용하여 컨테이너의 맨 아래에 요소를 배치하려면 다음 속성과 값을 사용해야 합니다.

• position: relative; (부모)
• position: absolute; (어린이)
• bottom: 0; (어린이)

예:

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

.parent {
  position: relative;
}

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

시각화를 쉽게 하기 위해 위에서 CSS 클래스를 가져와서 너비, 높이 및 색상을 추가했습니다.

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

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

결과:

위의 예에서 볼 수 있듯이 자식 요소는 자동으로 컨테이너의 왼쪽에 고정됩니다.

하위 요소를 오른쪽 하단에 배치하려면 right가 있는 하위 요소에 직접 지정해야 합니다. 속성:

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

결과: