คุณสมบัติ top

คุณสมบัติ top กำหนดตำแหน่ง ขอบบนสุดขององค์ประกอบจากด้านบนขององค์ประกอบแม่ ค่าสำหรับคุณสมบัติสามารถ กำหนดด้วยหน่วยวัดที่ใช้กันทั่วไป เช่น พิกเซล นิ้ว พอยต์ เปอร์เซ็นต์ ค่าที่กำหนดสามารถเป็นจำนวนลบได้ ในกรณีนี้องค์ประกอบจะซ้อนทับกัน การอ้างอิงพิกัดถูกกำหนดโดยคุณสมบัติ position ซึ่งโดยปกติจะมีค่าเป็น relative (ตำแหน่งสัมพัทธ์) หรือ absolute (ตำแหน่งสัมบูรณ์)

ไวยากรณ์

ตัวเลือก {
	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
ซึ่งกำหนดตำแหน่งของคำอธิบายตาราง