top 속성

top 속성은 상위 요소의 상단으로부터 요소의 상단 모서리 위치를 지정합니다. 속성 값은 픽셀, 인치, 포인트, 백분율 등과 같은 일반적으로 사용되는 크기 단위로 지정할 수 있습니다. 지정된 값은 음수일 수도 있으며, 이 경우 요소들이 서로 겹치게 됩니다. 좌표 계산은 일반적으로 relative (상대 위치) 또는 absolute (절대 위치) 값을 갖는 position 속성에 의해 결정됩니다.

구문

선택자 {
	top: 크기 또는 auto;
}

예제

자식 요소에 마우스를 올리면 상단 테두리 위치를 25px로 설정해 봅시다:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
	margin-left: 50px;
}
p:hover {
	top: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

예제

이번에는 마우스를 올리면 자식 요소의 상단 테두리가 -50px에 위치하도록 해봅시다:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	margin-top: 50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	top: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

같이 보기

요소의 하단 모서리 위치를 지정하는 속성 bottom
요소의 왼쪽 모서리 위치를 지정하는 속성 left
요소의 오른쪽 모서리 위치를 지정하는 속성 right
첫 번째 요소 뒤의 위치를 지정하는 의사 요소 ::backdrop
테이블 캡션 위치를 지정하는 속성 caption-side