CSS 톱 속성

정의와 사용법

top 속성은 요소의 상단 경계를 정의합니다. 이 속성은 위치 요소의 상단 외경 경계와 포함 블록의 상단 경계 간의 이동을 정의합니다.

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

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

상대적 정의 요소에 대해, top과 bottom 모두 auto라면 계산 값은 모두 0입니다. 그 중 하나가 auto라면, 다른 값의 반대 값을 가져갑니다. 두 값 모두가 auto가 아니라면, bottom은 top 값의 반대 값을 가져갑니다.

HTML DOM 참조 매뉴얼:top 속성

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

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

top: auto|length|initial|inherit;

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

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

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