0Pricing
Frontend Academy · บทเรียน

การกำหนดตำแหน่ง: relative absolute fixed sticky

นำองค์ประกอบออกจากการไหลปกติด้วยค่าของ position เพื่อวางเนื้อหาซ้อนกัน ตรึงส่วนหัว และสร้างแถบด้านข้างแบบติดตำแหน่ง

การกำหนดตำแหน่ง: relative absolute fixed sticky เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ลำดับการจัดวางเอกสารปกติ

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

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

องค์ประกอบทุกตัวเริ่มต้นด้วย position: static ซึ่งหมายความว่าองค์ประกอบนั้นถูกจัดตำแหน่งตามลำดับการจัดวางเอกสารปกติ คุณสมบัติ top, right, bottom และ left จะไม่มีผลกับองค์ประกอบแบบ static

position: relative

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

.card {
  position: relative;
  top: 10px;    /* shift 10px down from original position */
  left: -5px;   /* shift 5px left */
}

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

position: absolute จะนำองค์ประกอบออกจากการไหลปกติ โดยจัดตำแหน่งสัมพันธ์กับบรรพบุรุษที่มีการกำหนดตำแหน่งที่ใกล้ที่สุด (ค่า position ใด ๆ ที่ไม่ใช่ static) หากไม่มีบรรพบุรุษที่มีการกำหนดตำแหน่ง องค์ประกอบจะสัมพันธ์กับพื้นที่แสดงผล

.card {
  position: relative; /* creates context */
}
.card .badge {
  position: absolute;
  top: 12px;
  right: 12px; /* top-right corner of .card */
}

คุณสมบัติ z-index

องค์ประกอบที่มีการกำหนดตำแหน่งสามารถซ้อนทับกันได้ ใช้ z-index เพื่อควบคุมลำดับการซ้อน ค่า z-index ที่สูงกว่าจะอยู่ด้านบน ใช้ได้เฉพาะกับองค์ประกอบที่มีการกำหนดตำแหน่งเท่านั้น (ไม่ใช่ static) และจะสร้างบริบทการซ้อนใหม่

.tooltip {
  position: absolute;
  z-index: 100; /* above other content */
}
.modal {
  position: fixed;
  z-index: 1000; /* above tooltip */
}

การกำหนดตำแหน่งแบบตรึง

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

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: white;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

การกำหนดตำแหน่งแบบติดค้าง

position: sticky เป็นการทำงานแบบผสมผสาน องค์ประกอบจะเลื่อนไปพร้อมกับหน้าเว็บจนกระทั่งถึงค่าขีดจำกัด (กำหนดด้วย top/bottom) จากนั้นจะติดอยู่กับที่ เหมาะสำหรับส่วนหัวของส่วนต่าง ๆ ในตารางยาว หรือแถบด้านข้างที่ติดอยู่หลังจากเลื่อนผ่านส่วนหัว

.sidebar {
  position: sticky;
  top: 80px; /* sticks 80px from top after scroll */
  align-self: flex-start;
}

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

เทคนิคคลาสสิกคือ ผสาน position: absolute; top: 50%; left: 50% เข้ากับ transform: translate(-50%, -50%) เพื่อจัดองค์ประกอบให้อยู่กึ่งกลางขององค์ประกอบแม่ที่มีการกำหนดตำแหน่งได้อย่างพอดี

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  background: white;
  border-radius: 12px;
}

การซ่อนส่วนล้นจะตัดองค์ประกอบลูกแบบสัมบูรณ์

โดยค่าเริ่มต้น องค์ประกอบลูกที่มีการกำหนดตำแหน่งแบบสัมบูรณ์สามารถล้นออกนอกขอบเขตขององค์ประกอบแม่ได้ การเพิ่ม overflow: hidden ให้กับองค์ประกอบแม่จะตัดทุกสิ่งที่อยู่นอกกล่องของมันออก เหมาะสำหรับเอฟเฟกต์รูปภาพบนการ์ดและการตัดป้ายกำกับ

ข้อควรระวัง: บริบทการซ้อนที่ไม่ต้องการ

คุณสมบัติบางอย่างสร้างบริบทการซ้อนโดยไม่ตั้งใจ เช่น transform, filter, isolation: isolate ซึ่งอาจทำให้เกิดปัญหาการแย่งลำดับ z-index โดยองค์ประกอบที่มี z-index: 9999 ยังคงอยู่ด้านหลังองค์ประกอบอื่นได้ เพราะอยู่ภายในบริบทการซ้อนที่มีลำดับต่ำกว่า

ควรใช้การกำหนดตำแหน่งแต่ละแบบเมื่อใด

relative: ใช้ชดเชยตำแหน่งและสร้างบริบทการกำหนดตำแหน่ง absolute: ใช้กับป้ายกำกับ คำแนะนำแบบป๊อปอัป และชั้นซ้อนที่สัมพันธ์กับองค์ประกอบแม่ fixed: ใช้กับส่วนหัวที่คงอยู่ หน้าต่างโมดัล และการแจ้งเตือนแบบชั่วคราว sticky: ใช้กับส่วนหัวของส่วนต่าง ๆ และการนำทางแถบด้านข้างที่เลื่อนตามหน้า หลีกเลี่ยงการใช้ position เพื่อจัดวางเค้าโครง ให้ใช้การจัดวางแบบเฟล็กซ์หรือตารางแทน

ตรวจสอบอย่างรวดเร็ว

องค์ประกอบหนึ่งมี position: absolute; top: 0; right: 0; หากองค์ประกอบแม่มี position: relative องค์ประกอบนั้นจะปรากฏที่ใด

ทบทวน: การกำหนดตำแหน่งด้วย CSS

static เป็นค่าเริ่มต้น relative จะชดเชยตำแหน่งโดยไม่ออกจากการไหลปกติและสร้างบริบทการกำหนดตำแหน่ง absolute จะออกจากการไหลปกติและจัดตำแหน่งสัมพันธ์กับบรรพบุรุษที่มีการกำหนดตำแหน่งที่ใกล้ที่สุด fixed จะตรึงองค์ประกอบไว้กับพื้นที่แสดงผล sticky จะเลื่อนไปก่อนแล้วจึงติดอยู่กับที่ ใช้ z-index เพื่อควบคุมลำดับการซ้อนทับ

คำถามที่พบบ่อย

บทเรียน “การกำหนดตำแหน่ง: relative absolute fixed sticky” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดตำแหน่ง: relative absolute fixed sticky” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดตำแหน่ง: relative absolute fixed sticky”

นำองค์ประกอบออกจากการไหลปกติด้วยค่าของ position เพื่อวางเนื้อหาซ้อนกัน ตรึงส่วนหัว และสร้างแถบด้านข้างแบบติดตำแหน่ง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การกำหนดตำแหน่ง: relative absolute fixed sticky” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตัวเลือกและการเรียงซ้อน
  2. สี ตัวอักษร และโมเดลกล่อง
  3. พื้นฐาน display: block inline flex grid
  4. การกำหนดตำแหน่ง: relative absolute fixed sticky
← กลับไปที่ Frontend Academy