อีเลเมนต์ที่มี position: absolute จะถูกจัดตำแหน่งที่พิกัดที่ระบุ สัมพัทธ์กับมุมซ้ายบนของหน้าจอ
คุณสามารถใช้ค่าสองค่า top และ left ร่วมกับคุณสมบัติ position เพื่อย้ายอีเลเมนต์ HTML ไปที่ใดก็ได้ในเอกสาร
- เลื่อนซ้าย - ใช้ค่าลบสำหรับ left
- เลื่อนขวา - ใช้ค่าบวกสำหรับ left
- เลื่อนขึ้น - ใช้ค่าลบสำหรับ top
- เลื่อนลง - ใช้ค่าบวกสำหรับ top
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อนำ absolute positioning ไปใช้:
<html> <head> </head> <body> <div style = "position:absolute; left:80px; top:20px; background-color:yellow;"> Div นี้มี absolute positioning </div> </body> </html>