การจัดตำแหน่งแบบสัมบูรณ์โดยไม่ใช้พิกัดใน CSS

ในความเป็นจริง การระบุพิกัดเมื่อจัดตำแหน่งแบบสัมบูรณ์ ไม่ใช่สิ่งจำเป็น หากกำหนดให้องค์ประกอบมีเพียง position ในค่า absolute เท่านั้น องค์ประกอบนั้นจะกลายเป็นแบบสัมบูรณ์ แต่จะยังคงอยู่ที่ตำแหน่งเดิม ที่เคยอยู่ โดยที่องค์ประกอบอื่นๆ ทั้งหมดจะ ประพฤติตัวราวกับว่าไม่มีองค์ประกอบของเรา และอาจเคลื่อนที่มาทับได้

มาดูตัวอย่างกัน

ตัวอย่าง

เริ่มต้น ลองสร้างบล็อกสามบล็อก โดยไม่มีการกำหนดตำแหน่ง และมี ข้อความบางส่วนระหว่างบล็อก:

html<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

ตัวอย่าง

คราวนี้ลองเพิ่ม absolute ให้กับบล็อกสีเขียว ผลลัพธ์คือบล็อกนี้จะยังคงอยู่ที่เดิม ในขณะที่องค์ประกอบทั้งหมดด้านล่างจะประพฤติตัว ราวกับว่าไม่มีองค์ประกอบของเราและจะเคลื่อนทับมัน:

html<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

ตัวอย่าง

คราวนี้ลองเพิ่มคุณสมบัติ left โดยไม่เพิ่มตำแหน่งแนวตั้ง ผลลัพธ์ ในแนวนอนบล็อกของเราจะย้ายไปตามค่า ที่กำหนด ส่วนในแนวตั้งจะยังคงอยู่ ที่ตำแหน่งเดิม:

html<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  left: 40px; /* เพิ่มตำแหน่งแนวนอน */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

ตัวอย่าง

คราวนี้ ลองทำตรงกันข้ามโดยเพิ่มคุณสมบัติ top โดยไม่เพิ่มตำแหน่งแนวนอน ผลลัพธ์ในแนวตั้ง บล็อกของเราจะย้าย ไปตามค่าที่กำหนด ส่วนในแนวนอนจะ ยังคงอยู่ที่ตำแหน่งเดิม:

html<div id="elem1"></div>
<div id="elem2"></div>
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 100px; /* เพิ่มตำแหน่งแนวตั้ง */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат: