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