Position เป็นคุณสมบัติ(properties) ที่สำคัญของ css ซึ่งเราจะพบกับปัญหาเกี่ยวกับ position อยู่เสมอ บางคนลอง css ใน IE แล้วบอกว่าไม่เจอปัญหาอะไร แถมไม่ต้องใช้ position ก็ไม่เห็นมีอะไรเสียหาย แต่พอคุณลองไปทดสอบใน FF คุณจะรู้ว่าการไม่กำหนด position นั้นทำให้เว็บสวยๆงามๆเสียหายแค่ไหนยกตัวอย่างเว็บจากประเทศเกาหลี ซึ่งส่วนมากมีแต่เว็บสวยๆทั้งนั้น แต่พอเปิดใน FF มันก็กลายเป็นเว็บที่จัดวางข้อมูลได้อย่างมั่วมากๆ เพราะว่าไม่ได้กำหนด position ทำให้ข้อมูลบางส่วนอยู่ไม่ตรงจุดที่เราต้องการ

position มีอยู่ 4 ชนิดคือ

1. position: static; เป็น default position หมายความว่าถ้าเราไม่ได้กำหนด position มันก็จะเป็น position แบบ static โดยอัตโนมัต  ซึ่งเราไม่สามารถที่จะกำหนดตำแหน่งต่างๆได้ เช่น top rigth เป็นต้น
2. position: relative; สามารถกำหนดตำแหน่งได้ ซึ่งจะอ้างอิงกับตำแหน่งเดิม โดยที่เมื่อย้ายตำแหน่งไปแล้ว ตำแหน่งเดิมของมันก็จะเป็นช่องว่างไม่มี element อื่นๆมาแทรก
3. position: absolute; สามารถย้ายตำแหน่งได้เหมือนกับ relative แต่ว่าจะอ้างอิงกับหน้าเอกสาร และตำแหน่งเดิมของมันก็จะถูกแทนที่ด้วย element อื่น
4. position: fixed; ไม่เคยใช้ครับ ใน W3Schools อธิบายว่า สามารถย้ายตำแหน่งได้ตามต้องการ อ้างอิงกับหน้าจอ  และจะอยู่ในตำแหน่งเดิมไม่ว่าเราจะเลื่อน scroll ไปแค่ไหน ซึ่งกำหนดได้เพียงแค่ left right top bottom ไม่สามารถกำหนดเป็น pixel ได้ครับ

เทคนิคการใช้งาน

relative vs. absolute
เมื่อกำหนดให้position absolute อยู่บน relative แล้ว ตัว absolute จะอ้างอิงกับตำแหน่งของ relative ครับ หมายความว่าจากเดิม ที่อ้างอิงกับตัวเอกสารมันก็จะอ้างอิงกับ relative แทน ดูตัวอย่าง

2 absolute column
สร้าง column โดยใช้ absulote ดูตัวอย่าง