ค่าลบในการจัดตำแหน่งด้วย CSS

คุณสมบัติที่เราเรียนรู้มาแล้วอย่าง top, right, bottom และ left สามารถรับได้ ไม่เพียงแต่ค่าบวก แต่ยังรวมถึงค่าลบ ด้วย มาดูตัวอย่างกัน

ตัวอย่าง

ในตัวอย่างต่อไปนี้ องค์ประกอบถูกจัดตำแหน่งแบบสัมบูรณ์ เทียบกับผู้ปกครองของมัน และอยู่ที่ตำแหน่ง 0 จากด้านบน, 0 จากด้านซ้าย:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

ทีนี้ลองย้ายองค์ประกอบไปที่ตำแหน่ง -20px จากด้านบน, -30px จากด้านซ้าย:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: