position attribute

#พื้นฐานการเขียนเว็ปไซต์

#css

#position

position ใน CSS คือคุณสมบัติที่ใช้กำหนด วิธีจัดวางตำแหน่งของ Element บนหน้าเว็บ โดยมีค่าที่เป็นไปได้ 5 แบบคือ static, relative, absolute, fixed, และ sticky ซึ่งแต่ละค่าจะมีวิธีการทำงานและผลลัพธ์ที่แตกต่างกันในการกำหนดตำแหน่งและการซ้อนทับของ Element ในหน้าเว็บ

ชนิดของ position ใน CSS

1. static (ค่าเริ่มต้น):

Element จะถูกวางตามลำดับปกติในหน้าเว็บ และไม่มีผลต่อการใช้คุณสมบัติอื่น ๆ เช่น top, bottom, left, right

2. relative:

Element จะถูกวางต่อจากตำแหน่งเดิมตามปกติ แต่สามารถใช้คุณสมบัติ top, bottom, left, right เพื่อเลื่อนตำแหน่งของ Element นั้น ๆ ได้ โดยจะสร้างพื้นที่สำหรับ Element ที่ถูกเลื่อน แต่ Element อื่นจะมองไม่เห็นการเลื่อนนี้และยังคงวางต่อจากตำแหน่งเดิม

3. absolute:

Element จะถูกวางตำแหน่งโดยอิงจาก Element ที่ครอบ (containing element) ที่มีค่า position ที่ไม่ใช่ static (เช่น relative, absolute, fixed) Element อื่น ๆ จะมองไม่เห็น Element นี้และวางตำแหน่งใหม่ต่อจาก Element ก่อนหน้า

4. fixed:

Element จะถูกตรึงตำแหน่งไว้กับ viewport (หน้าต่างของเบราว์เซอร์) เสมอ ไม่ว่าผู้ใช้จะเลื่อนหน้าเว็บไปอย่างไร

5. sticky:

เป็นค่าที่ผสมผสานระหว่าง relative และ fixed โดย Element จะถูกจัดวางในลำดับปกติก่อน จากนั้นเมื่อผู้ใช้เลื่อนหน้าเว็บจน Element นั้นเข้าใกล้ตำแหน่งที่กำหนดด้วย top, bottom, left, หรือ right Element จะเปลี่ยนไปเป็นตำแหน่ง fixed และหยุดนิ่งอยู่กับที่