คุณสมบัติ position

คุณสมบัติ position กำหนดวิธีการจัดตำแหน่ง ขององค์ประกอบ คุณสมบัตินี้ส่วนใหญ่ มักใช้ร่วมกับคุณสมบัติ top, right, bottom, left, ซึ่งกำหนดระยะห่าง จากด้านบน, ขวา, ล่าง, ซ้าย ตามลำดับ

ไวยากรณ์

selector {
	position: absolute | relative | fixed | static | sticky;
}

ค่าของ position

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

ค่าเริ่มต้น: static

ตัวอย่าง การจัดตำแหน่งแบบสัมบูรณ์

มาจัดวางองค์ประกอบที่มุมซ้ายบน ของหน้าจอโดยมีระยะห่างเล็กน้อย:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

ตัวอย่าง การจัดตำแหน่งแบบสัมบูรณ์

และตอนนี้มาจัดวางองค์ประกอบที่มุมขวาบน ของหน้าจอโดยมีระยะห่างเล็กน้อย:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

ตัวอย่าง การจัดตำแหน่งแบบตรึงที่

ด้วยการจัดตำแหน่งแบบตรึงที่ องค์ประกอบ จะยังคงอยู่ที่เดิมเมื่อเลื่อน:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

ตัวอย่าง การจัดตำแหน่งแบบสัมพัทธ์

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

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

ตัวอย่าง การซ้อนกัน

หาก parent มีคุณสมบัติ position เป็นค่า relative องค์ประกอบที่ถูกจัดตำแหน่งแบบสัมบูรณ์ จะถูกจัดตำแหน่งเทียบกับ parent:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

ตัวอย่าง การซ้อนกัน

หาก parent มีคุณสมบัติ position เป็นค่า absolute องค์ประกอบที่ถูกจัดตำแหน่งแบบสัมบูรณ์ จะถูกจัดตำแหน่งเทียบกับ parent:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

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

หากองค์ประกอบมีคุณสมบัติ position เป็นค่า sticky องค์ประกอบจะ ทำงานเหมือน relative จนกว่าจะถึงตำแหน่งที่กำหนด เมื่อเลื่อน หลังจากนั้นจะติดกับตำแหน่งนั้น มาสร้าง header ติดกัน:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

ตัวอย่าง ไม่มีตำแหน่ง

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

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

ตัวอย่าง แกนเดียว

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

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

ตัวอย่าง ทุกตำแหน่ง

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

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

ดูเพิ่มเติม

คุณสมบัติ z-index,
ซึ่งกำหนดการซ้อนทับขององค์ประกอบ