CSS : position fixed และ absolute

ข้อแตกต่างระหว่าง fixed และ absolute

Absolute

absolute ใช้สำหรับกำหนดตำแหน่งของ container โดยอ้างอิงจากขอบนอกสุดของหน้านั้น

position : absolute
top: 100px;
left: 600px;

คือแสดง container โดยห่างจากขอบบนสุด 100px ขอบซ้าย 600px

นอกจากนี้ยังสามารถอ้างอิงจากกรอบของ container ที่มันอาศัยอยู่แทนการอ้างอิงจากกรอบ  browser ได้ด้วย โดย container ที่คลุมมันต้องมี position เป็น relative
ex. ตอนกด icon notification / friend request/ message ใน facebook


Fixed

ใช้สำหรับกำหนดตำแหน่งของ container โดยอ้างอิงจากตำแหน่งหน้าจอของ browser ขณะนั้น

position:fixed;
top: 100px;
left: 600px;

คือแสดง container โดยอ้างจากขอบบนของหน้าจอตอนนั้น 100px และซ้าย 600px (เช่นเลื่อนลงมาครึ่งจอแล้วค่อยสร้าง container)
ex. พวกแบนเนอร์โฆษณาที่วิ่งตามเวลาเรา scroll หนี, ตอนกด delete post ใน wall facebook

//delete post ใน wall facebook ไม่ได้ใช้ fixed ธรรมดา แต่ใช้ fixed ผสมกับ absolute เพื่อไม่ให้ container เลื่อนตามจอ
//สร้างเส้นไว้กำหนดตำแหน่งด้วย fix -> กดปุ่ม delete -> javascript คำนวนตำแหน่งของเส้น ณ ตอนนั้น -> สร้าง container absolute ณ ตำแหน่ง ของเส้นตอนนั้น