CSS 상단 속성
예시
위치가 지정된 <div> 요소의 위쪽 가장자리를 가장 가까운 위치에 있는 조상의 위쪽 가장자리에서 50px 아래로 설정합니다.
div {
position: absolute;
top:
50px;
border: 3px solid green;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 top
배치된 요소의 수직 위치에 영향을 줍니다. 이 속성은 위치가 지정되지 않은 요소에는 영향을 미치지 않습니다.
- 위치인 경우: 절대; 또는 위치: 고정; -
top
속성은 요소의 상단 가장자리를 가장 가까운 위치에 있는 조상의 상단 가장자리 위/아래 단위로 설정합니다. - 위치인 경우: 상대; -
top
속성은 요소의 상단 가장자리가 정상 위치 위/아래로 이동하도록 합니다. - 위치인 경우: 끈적임; -
top
속성은 요소가 뷰포트 내부에 있을 때 위치가 상대적인 것처럼 동작하고 외부에 있을 때 위치가 고정된 것처럼 작동합니다. - 위치: 정적; -
top
속성은 효과가 없습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
CSS 구문
top: auto|length|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
auto | Lets the browser calculate the top edge position. This is default | |
length | Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units | |
% | Sets the top edge position in % of containing element. Negative values are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
위치가 지정된 조상이 없는 요소와 음수 값과 함께 top 속성을 사용합니다.
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
관련 페이지
CSS 튜토리얼: CSS 포지셔닝
CSS 참조: 하단 속성
CSS 참조: 왼쪽 속성
CSS 참조: 오른쪽 속성
HTML DOM 참조: top 속성