คุณสมบัติ bottom

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

ไวยากรณ์

ตัวเลือก {
	bottom: ตัวเลขพร้อมหน่วยวัด หรือ 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;
}
p:hover {
	bottom: 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;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ดูเพิ่มเติม

คุณสมบัติ top,
ซึ่งกำหนดตำแหน่งขอบบนขององค์ประกอบ
คุณสมบัติ left,
ซึ่งกำหนดตำแหน่งขอบซ้ายขององค์ประกอบ
คุณสมบัติ right,
ซึ่งกำหนดตำแหน่งขอบขวาขององค์ประกอบ
องค์ประกอบเทียม ::backdrop,
ซึ่งกำหนดตำแหน่งหลังองค์ประกอบแรก
คุณสมบัติ caption-side,
ซึ่งกำหนดตำแหน่งของหัวข้อตาราง