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