คุณสมบัติ position ใช้ในการจัดตำแหน่งองค์ประกอบ ได้แก่ −
static − องค์ประกอบจัดวางตามปกติของ Document Flow
relative − องค์ประกอบจัดวางตามปกติ แล้วเลื่อนตำแหน่งจากจุดเดิม
absolute − องค์ประกอบจัดวางเทียบกับ Containing Block นอก Document Flow
fixed − องค์ประกอบจัดวางแบบ Absolute คงที่ตาม Viewport
นี่คือโค้ดสำหรับการจัดตำแหน่งองค์ประกอบโดยใช้ CSS −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { color: white; text-align: center; height: 100px; width: 100px; } .static { position: static; background-color: greenyellow; } .relative { position: relative; left: 50px; background-color: rgb(255, 47, 47); } .absolute { position: absolute; right: 50px; top: 20px; background-color: hotpink; } </style> </head> <body> <h1>Position elements example</h1> <div class="static">STATIC</div> <div class="relative">RELATIVE</div> <div class="absolute">ABSOLUTE</div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
