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

Absolute Positioning ใน CSS จัดตำแหน่งสัมพัทธ์กับหน้าจอ


อีเลเมนต์ที่มี 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>