CSS Property Position คืออะไร

หลายคนคงจะสงสัยว่า css property position คืออะไร และเอาไปใช้ที่ไหน แต่ละตัวใช้งานยังไง … ในนี้มีคำตอบมาให้ทุกคนแล้ว ไปดูกันเลย

CSS Property Position คืออะไร?

CSS Property Position เป็นตัวจัดการตำแหน่งของ element หรือเป็นตัวกำหนดตำแหน่งของ layout โดยสามารถกำหนดตำแหน่งตามที่ต้องการ โดยการใช้ left/right/top/bottom

เอา CSS Property Position ไปใช้ที่ไหน?

ก็คงจะเห็นชื่อหัวข้ออยู่แล้วว่าเป็น CSS Property Position จะใช้กับการทำงานฝั่ง frontend โดยใช้กำหนดในส่วนของ CSS นั่นเอง

แต่ละตัวใช้งานยังไงบ้าง?

1. static คือ ทุกๆ element จะเป็นค่าเริ่มต้น จะไม่สามารถกำหนดค่า left, right, top, bottom ได้ หรือกรณีที่กำหนดค่ามาด้วย ก็จะไม่มีผลตามที่กำหนด และกรณีที่ไม่ได้กำหนด position มาเลย จะเป็น static โดยอัตโนมัติ

position : static;

การแสดงผลของ position : static;

2. relative จะคล้ายๆกับ static แต่ในส่วนของ relative จะสามารถกำหนดค่า left, right, top, bottom เพื่อกำหนดตำแหน่งได้

position: relation;

การแสดงผลของ position: relation;

3. absolute มี 2 กรณี คือ

กรณีที่ 1 คือ กรณีที่ไม่มี position ไหนมาครอบเลย ตัว absolute จะไม่สนใจตัวที่อยู่ก่อนหน้า จะยึดตัวเองเป็นหลัก ทำให้เกิดการทับซ้อนของ layout ได้ เพราะ absolute จะทำงานแบบเป็นอิสระ และสามารถกำหนดค่า left, right, top, bottom ได้

กรณีที่ 2 คือ กรณีที่มี position อื่นมาครอบ ตัว absolute จะอยู่ภายใต้ ตัวที่มาครอบเท่านั้น และสามารถกำหนดค่า left, right, top, bottom ได้

position: absolute;

การแสดงผลของ position: absolute;

4. fixed เป็นการ fixed ตำแหน่งไว้ตรงไหนก็ได้ ตามที่ต้องการ โดยสามารถกำหนดค่า left, right, top, bottom ได้ และเมื่อทำการ scroll ลงก็จะยังอยู่ตำแหน่งเดิม

position: fixed;

การแสดงผลของ position: fixed;

5. sticky การทำงานปกติจะเป็นแบบ relative แต่ถ้า scroll ลงจะทำงานเป็น fixed ทันที โดยจะต้องกำหนดจุดที่จะเป็นจุด fixed ด้วย และสามารถกำหนดค่า left, right, top, bottom ได้ เช่น กำหนด top: 0; ก็จะแสดงจุด fixed ที่จุดที่กำหนด

position : sticky;

การแสดงผลของ position: sticky;

สำหรับเรื่อง CSS Property Position ก็จบลงแล้ววว หวังว่าบทความนี้จะมีประโยชน์สำหรับคนที่สนใจ และสามารถนำความรู้ในบทความนี้ไปใช้ได้ นะคะ 😊😊😊