ทำความเข้าใจ float, position ใน CSS

Cascading Style Sheets หรือ CSS คือ ภาษาที่ใช้สำหรับการตกแต่งเว็บไซต์ให้สวยงามมากยิ่งขึ้น เช่น ทำให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ ตามที่ต้องการ โดยจะช่วยลดการเขียนโค๊ด html และแยกส่วนเนื้อหาและรูปแบบการแสดงผลออกจากกัน

ใน CSS มีให้เราตั้งค่าได้หลายอย่างเช่น border, visibility, margin, position, float, display เป็นต้น ซึ่งในที่นี้เราจะพูดถึง float และ position

float

float เปรียบเสมือนด้าน โดยถ้าเรากำหนดว่า float : left สิ่งที่เรากำหนดก็จะอยู่ชิดด้านซ้าย float : right ก็จะชิดด้านขวา และถ้าเป็น float : none สิ่งนั้นก็จะอยู่ตำแหน่งเดิมเหมือนไม่ได้มีการกำหนด float และถ้าเราต้องการกำหนดให้อยู่กึ่งกลางเราจะใช้การกำหนด margin-left : auto และ margin-right : auto แทน

position

position จะแบ่งออกหลักๆเป็น 4 อย่างคือ

1. static หรือก็คือค่าเริ่มต้น ถ้าเราไม่ได้กำหนดจะถูกเลือกเป็น static อยู่แล้ว
2. relative จะแสดงผลต่อจากจุดๆนั้น จะไม่เกิดการทับซ้อนกัน
3. fixed ความหมายตรงตัวคือกำหนดตำแหน่งอย่างชัดเจนบนหน้า browser
4. absolute ให้การแสดงผลอิสระให้ไปอยู่ที่ไหนก็ได้ ซึ่งอาจจะทับซ้อนกันได้

ดูตัวอย่าง คลิกที่นี่

เรียนรู้เพิ่มเติม คลิกที่นี่