การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ
จัดตำแหน่งองค์ประกอบแบบสัมบูรณ์โดยอ้างอิงบรรพบุรุษที่ใกล้ที่สุดซึ่งมีการกำหนดตำแหน่ง
การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
position: absolute
องค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์จะถูกนำออกจากลำดับการจัดวางปกติของเอกสาร องค์ประกอบอื่นจะทำเสมือนว่าองค์ประกอบนี้ไม่มีอยู่ และองค์ประกอบนี้จะถูกจัดวางโดยอ้างอิงจากองค์ประกอบบรรพบุรุษที่กำหนดตำแหน่งซึ่งอยู่ใกล้ที่สุด
บล็อกอ้างอิง
บล็อกอ้างอิงขององค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์ คือองค์ประกอบบรรพบุรุษที่อยู่ใกล้ที่สุดและมีค่า position ที่ไม่ใช่ static หากไม่มี องค์ประกอบนั้นจะถูกจัดวางโดยอ้างอิงจากบล็อกอ้างอิงเริ่มต้น (วิวพอร์ต)
การตั้งค่าบล็อกอ้างอิง
รูปแบบที่ใช้กันทั่วไปที่สุดคือ เพิ่ม position: relative ให้กับองค์ประกอบแม่ เพื่อควบคุมองค์ประกอบลูกที่กำหนดตำแหน่งแบบสัมบูรณ์
<div class="card">Card content<span class="badge">Badge</span></div>
คุณสมบัติค่าออฟเซ็ตกับ absolute
เมื่อใช้การกำหนดตำแหน่งแบบสัมบูรณ์ ค่า top/right/bottom/left จะวัดจากขอบด้านระยะเสริมของบล็อกอ้างอิง
<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>
การจัดกึ่งกลางด้วย absolute
เทคนิคคลาสสิกสำหรับจัดองค์ประกอบแบบสัมบูรณ์ให้อยู่กึ่งกลาง:
<div class="center-wrap"><div class="centered">Perfectly centered</div></div>
ความกว้างและความสูงขององค์ประกอบแบบ absolute
โดยค่าเริ่มต้น องค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์จะปรับขนาดให้พอดีกับเนื้อหา (เว้นแต่จะกำหนดความกว้างหรือความสูงไว้) องค์ประกอบเหล่านี้จะไม่ยืดเต็มความกว้างของคอนเทนเนอร์เหมือนองค์ประกอบแบบบล็อกอีกต่อไป
การยืดด้วยการกำหนดขอบทุกด้าน
การกำหนดขอบทั้งสี่ด้านเป็น 0 จะยืดองค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์ให้เต็มบล็อกอ้างอิง:
<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>
รูปแบบย่อ inset
พร็อพเพอร์ตี inset เป็นรูปแบบย่อสำหรับ top, right, bottom และ left รวมกัน:
<div class="cover-wrap"><div class="full-cover"></div></div>
การซ้อนด้วย z-index
องค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์จะเข้าร่วมในบริบทการซ้อนเลเยอร์ ใช้ z-index เพื่อควบคุมว่าองค์ประกอบแบบสัมบูรณ์ที่ซ้อนทับกันจะแสดงองค์ประกอบใดไว้ด้านบน
<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>
ข้อผิดพลาดที่พบบ่อย: ลืมกำหนดองค์ประกอบแม่
หากลืมเพิ่ม position: relative ให้กับองค์ประกอบแม่ องค์ประกอบลูกแบบสัมบูรณ์จะถูกจัดวางโดยอ้างอิงจากองค์ประกอบบรรพบุรุษที่กำหนดตำแหน่งไว้แล้วซึ่งอยู่ใกล้ที่สุด ซึ่งมักจะเป็นวิวพอร์ต ควรตรวจสอบบล็อกอ้างอิงเสมอ
absolute ภายใน Flex/Grid
คอนเทนเนอร์แบบ flex หรือ grid จะ< strong>ไม่กลายเป็นองค์ประกอบที่กำหนดตำแหน่งโดยอัตโนมัติ คุณยังคงต้องเพิ่ม position: relative อย่างชัดเจนเพื่อทำให้คอนเทนเนอร์นั้นเป็นบล็อกอ้างอิงสำหรับองค์ประกอบลูกแบบสัมบูรณ์
ตรวจสอบความเข้าใจ
องค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์จะถูกจัดวางไว้ที่ใด หากไม่มีองค์ประกอบบรรพบุรุษใดมีค่า position ที่ไม่ใช่ static
สรุป
องค์ประกอบที่กำหนดตำแหน่งแบบสัมบูรณ์จะออกจากลำดับการจัดวางของเอกสาร และถูกจัดวางโดยอ้างอิงจากองค์ประกอบบรรพบุรุษที่ไม่ใช่ static ซึ่งอยู่ใกล้ที่สุด ควรเพิ่ม position: relative ให้กับองค์ประกอบแม่เสมอเพื่อควบคุมตำแหน่ง ใช้ inset: 0 เพื่อยืดองค์ประกอบแบบสัมบูรณ์ให้เต็มคอนเทนเนอร์
คำถามที่พบบ่อย
บทเรียน “การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ”
จัดตำแหน่งองค์ประกอบแบบสัมบูรณ์โดยอ้างอิงบรรพบุรุษที่ใกล้ที่สุดซึ่งมีการกำหนดตำแหน่ง คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดตำแหน่งแบบคงที่และสัมพัทธ์
- การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ
- การจัดตำแหน่งแบบตรึงและแบบยึดติด
- Z-index และบริบทการซ้อน