การจัดตำแหน่งแบบตายตัวใน CSS

ตอนนี้เราจะมาทำความเข้าใจกับการจัดตำแหน่งแบบตายตัว มันคล้ายกับแบบสัมบูรณ์ ความแตกต่างจะแสดงออกมา ในวิธีที่ประเภทของการจัดตำแหน่งเหล่านี้ทำงาน เมื่อมีแถบเลื่อน

เมื่อเลื่อนหน้าเว็บ องค์ประกอบที่ถูกจัดตำแหน่งแบบสัมบูรณ์ จะเลื่อนไปพร้อมกับหน้าเว็บ ดูตัวอย่าง:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}

เราสามารถทำให้เมื่อเลื่อนหน้าเว็บ องค์ประกอบที่ถูกจัดตำแหน่งยังคงอยู่ ที่เดิมได้ ในการทำเช่นนี้ ต้องกำหนดการจัดตำแหน่งแบบตายตัว โดยใช้คุณสมบัติ position ที่มีค่าเป็น fixed:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: fixed; /* กำหนดการจัดตำแหน่งแบบตายตัว */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}