Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

Fixed Positioning ใน CSS ตำแหน่งคงที่บนหน้าจอ


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>