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

ใน CSS เราสามารถกำหนดตำแหน่งขององค์ประกอบเป็น absolute ซึ่งจะทำให้องค์ประกอบถูกจัดตำแหน่งตามพาเรนต์ตัวแรกที่มีตำแหน่งไม่ใช่ static องค์ประกอบที่ใช้วิธีการจัดตำแหน่งแบบ absolute จะถูกควบคุมโดยคุณสมบัติ CSS Positioning ได้แก่ left, right, top และ bottom

ตัวอย่างที่ 1: จัดตำแหน่งข้อความตรงกลางด้วย Absolute

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    div:first-child {
      background-color: orange;
      text-align: center;
    }
    div:last-child {
      width: 250px;
      height: 100px;
      margin: auto;
      background-color: turquoise;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div>Demo text</div>
  <p>ICC is International Cricket Council is the governing body of Cricket founded in 1909........</p>
  <div></div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: เปรียบเทียบ Relative, Absolute และ Fixed

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      border: 2px double #a43356;
      margin: 5px;
      padding: 5px;
    }
    #d1 {
      position: relative;
      height: 10em;
    }
    #d2 {
      position: absolute;
      width: 20%;
      bottom: 10px; /* ตามพาเรนต์ d1 */
    }
    #d3 {
      position: fixed;
      width: 30%;
      top: 10em; /* ตาม viewport */
    }
  </style>
</head>
<body>
  <div id="d1">
    MySQL is the most popular Open Source Relational SQL Database Management System...
    <mark>relative</mark>
    <div id="d2"><mark>absolute</mark></div>
    <div id="d3"><mark>fixed</mark></div>
  </div>
</body>
</html>

ผลลัพธ์

สรุปความแตกต่าง

• relative - จัดตำแหน่งตามตำแหน่งเดิมของตัวเอง
• absolute - จัดตำแหน่งตามพาเรนต์ที่มี position ไม่ใช่ static
• fixed - จัดตำแหน่งตาม viewport (จอภาพ) คงที่เมื่อเลื่อนหน้าจอ