CSS bottom 속성

정의와 사용법

bottom 속성은 요소의 하단 경계를 정의합니다. 이 속성은 위치 요소의 외부 마argins의 하단 경계와 포함 블록의 하단 경계 간의 옆침을 정의합니다.

주의:"position" 속성의 값이 "static"이면, "bottom" 속성을 설정하여도 어떤 효과도 발생하지 않습니다.

설명

static 요소에 대해 auto, 길이 값에 대해 해당 절대 길이, 백분율 값에 대해 지정된 값, 그렇지 않으면 auto입니다.

상대적 정의 요소에 대해, bottom와 top이 모두 auto라면 계산 값은 모두 0입니다. 그 중 하나가 auto라면, 다른 값의 반대数值로 계산됩니다. 그리고 두 가지 모두가 auto가 아니라면, bottom는 top 값의 반대数值로 계산됩니다.

추가 참조:

CSS 강의:CSS 정렬

HTML DOM 참조 매뉴얼:bottom 속성

예제

이미지의 하단 경계를 포함 요소의 하단 경계 위에 5픽셀 높이의 위치로 설정합니다:

img
  {
  position:absolute;
  bottom:5px;
  }

직접 테스트해 보세요

CSS 문법

bottom: auto|length|initial|inherit;

속성 값

설명
auto 기본 값. 브라우저가 하단 위치를 계산합니다.
% 요소의 하단 위치를 포함 요소의 백분율로 설정합니다. 음수 값을 사용할 수 있습니다.
length px, cm 등의 단위로 요소의 하단 위치를 설정합니다. 음수 값을 사용할 수 있습니다.
inherit 부모 요소에서 bottom 속성 값을 继承 정의해야 합니다.

기술 세부 사항

기본 값: auto
thừa kế: no
버전: CSS2
JavaScript 문법: object.style.bottom="50px"

추가 예제

픽셀 값으로 이미지의 하단 경계를 설정하는 방법
이 예제에서는 이미지의 하단 경계를 픽셀 값으로 설정하는 방법을 보여줍니다.
백분율로 이미지의 하단 경계를 설정하는 방법
이 예제에서는 이미지의 하단 경계를 백분율 값으로 설정하는 방법을 보여줍니다.

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
1.0 5.0 1.0 1.0 6.0