CSS Position: คู่มือครบถ้วนสำหรับคุณสมบัติ position

คุณสมบัติ position ใน CSS ใช้กำหนดตำแหน่งขององค์ประกอบบนหน้าเว็บ คุณสมบัติ top, right, bottom, left ระบุตำแหน่งสัมพัทธ์กับขอบของกล่อง (box) position มี 5 ค่า ได้แก่ static, fixed, relative, sticky, และ absolute

บทนำ

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

ค่า static (ค่าเริ่มต้น)

องค์ประกอบ HTML ทุกตัวเป็น static โดยค่าเริ่มต้น ไม่ได้รับผลกระทบจาก top, right, bottom, left เบราว์เซอร์จัดวางตามปกติ

.outer { position: static; border: 2px solid lightblue; }

ค่า fixed

fixed วางองค์ประกอบติดอยู่ตำแหน่งหน้าจอ (viewport) ไม่เคลื่อนย้ายเมื่อเลื่อนหน้าจอ (scroll) ต้องใช้ top, right, bottom, left ร่วมกับ

.outer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  border: 2px solid lightblue;
}

ตัวอย่าง: กล่องติดมุมล่างขวา หน้าจอเลื่อน กล่องก็อยู่ที่เดิม

ค่า relative

relative วางองค์ประกอบสัมพัทธ์กับตำแหน่งเดิมของมัน ใช้ top, right, bottom, left ระบุ offset พื้นที่ที่ว่างจากการเลื่อนจะไม่ถูกองค์ประกอบอื่นเติม

.outer {
  position: relative;
  left: 50px;
  border: 2px solid lightblue;
}

กล่องเลื่อนขวา 50px จากตำแหน่งเดิม ช่องว่างด้านซ้ายไม่ถูกเติม

ค่า sticky

sticky ผสมระหว่าง relative และ fixed เริ่มต้นเป็น relative แต่เมื่อผู้ใช้ scroll จนเกิน threshold ที่กำหนด (เช่น top: 0) จะกลายเป็น fixed ติดอยู่ขอบจอ

เหมาะสำหรับ Navigation Bar ที่ติดด้านบนเมื่อ scroll

.inner {
  position: sticky;
  top: 0;
  border: 2px solid lightblue;
}

กล่องจะอยู่ใต้ย่อหน้าแรก เมื่อ scroll จนถึงกล่อง กล่องจะติดด้านบนจอ ไปด้วยจน scroll กลับขึ้นบน

ค่า absolute

absolute วางองค์ประกอบสัมพัทธ์กับ ancestor ใกล้ที่สุดที่มี position ไม่ใช่ static (relative, fixed, absolute, หรือ sticky) หากไม่มี ancestor ใดๆ จะสัมพัทธ์กับ <html> (initial containing block)

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid lightblue;
}
.inner {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 2px solid pink;
}

กล่องสีชมพู (.inner) อยู่มุมซ้ายล่างของกล่องสีฟ้า (.outer) เพราะ .outer เป็น relative

สรุป

คุณสมบัติ position ร่วมกับ top, right, bottom, left ให้คุณควบคุมตำแหน่งองค์ประกอบได้อย่างยืดหยุ่น ตอนนี้คุณพร้อมใช้ position อย่างมืออาชีพแล้ว!