CSS position มีค่าอะไรบ้าง?

Question

IT Interview Practice · Accepted Answer

`position` ควบคุมวิธีการวางองค์ประกอบและว่าคุณสมบัติออฟเซต (`top`/`right`/`bottom`/`left`) นำไปใช้หรือไม่

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: การจับคู่ที่สำคัญ

`absolute` วางตำแหน่งองค์ประกอบที่สัมพันธ์กับ **บรรพชนที่อยู่ใกล้ที่สุดที่มีตำแหน่ง** (สิ่งใด ๆ นอกเหนือจาก `static`) ดังนั้นคุณจึงตั้ง `position: relative` บนพ่อแม่เพื่อให้เป็นจุดอ้างอิง:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

รูปแบบลูกที่มีพ่อแม่แบบ relative / absolute นี้อยู่ทุกที่: badge, เมนูแบบเลื่อนลง, เคล็ดลับเครื่องมือ, ปุ่มปิด

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — ล็อคเข้ากับวิวพอร์ต (มองเห็นได้เสมอ) เช่น แถบนำทางที่คงอยู่
- **sticky** — ทำหน้าที่แบบสัมพันธ์จนกว่าจะถึงเกณฑ์ (`top: 0`) จากนั้นจะอยู่ที่นั่นขณะที่ภาชนะอยู่ในมุมมอง — ยอดเยี่ยมสำหรับส่วนหัวของส่วน

## ข้อผิดพลาดทั่วไป

`absolute`/`fixed` องค์ประกอบจะ **ลบออกจากการไหลตามปกติ** ดังนั้นจึงไม่สงวนพื้นที่ — พี่น้องทำตัวราวกับว่าพวกเขาไม่อยู่ซึ่งอาจทำให้เกิดการทับซ้อน วางแผนสำหรับสิ่งนั้น (เช่น เพิ่มช่องว่างภายในเพื่อชดเชยแถบนำทางแบบคงที่)

## ทำไมมันถึงสำคัญ

`position` มีความจำเป็นสำหรับการวางทับ ส่วนหัวแบบติดขึด โมดัล เมนูแบบเลื่อนลง และ badge

ความสัมพันธ์พ่อแม่ relative/ลูก absolute และความแตกต่าง fixed-vs-sticky คือแกนหลักในทางปฏิบัติที่คุณใช้อยู่เสมอ

relative + absolute: การจับคู่ที่สำคัญ

fixed vs sticky

ข้อผิดพลาดทั่วไป

ทำไมมันถึงสำคัญ

คำถามที่เกี่ยวข้อง