ขยับตําแหน่ง HTML ด้วย position relative

ขยับตําแหน่ง HTML ด้วย position relative บทความนี้สอนใช้คำสั่ง position กำหนดค่าเป็น relative เพื่อขยับตำแหน่งของ elements ที่ต้องการด้วยภาษา CSS ทำงานร่วมกับแท็กต่างๆ ของ HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ขยับตําแหน่ง HTML ด้วย position relative

<style>
  .box {
    width: 150px;
    height: 150px;
    background-color: green;
    position: relative;
    top: 15px;
    left: 15px;
  }
</style>

<div class="box"></div>

ขยับตําแหน่ง HTML จากตัวอย่างสร้าง div พร้อม class="box" จากนั้นกำหนด position: relative เพื่อขยับตำแหน่งของ div ดังกล่าว โดยคำสั่งนี้จะต้องใช้งานร่วมกับคำสั่ง

1. top คือ ขยับตําแหน่งจากทางด้านบนกับ elements

2. left คือ ขยับตําแหน่งจากทางด้านซ้ายกับ elements

3. bottom คือ ขยับตําแหน่งจากทางด้านล่างกับ elements

4. right คือ ขยับตําแหน่งจากทางด้านขวากับ elements