Layout Basics

Workshop 1: Notification Badge

สร้าง icon พร้อม notification badge โดยใช้ position relative บน parent และ position absolute บน badge — z-index ทำให้ badge อยู่ด้านบนเสมอ

Workshop 2: Centered Content Layout

สร้าง centered layout ที่ใช้หลายเทคนิคพร้อมกัน — margin: 0 auto จัดกลางแนวนอน, max-width จำกัดความกว้าง และ padding ป้องกันข้อความชนขอบบนหน้าจอเล็ก

Workshop 3: Sticky Header

สร้าง header ที่ติดด้านบนหน้าจอเมื่อ scroll ด้วย position: sticky — ต่างจาก fixed ตรงที่ sticky ยังอยู่ใน normal flow จึงไม่ดัน content ออกไป