การจัดวางตำแหน่งแบบสัมบูรณ์ขององค์ประกอบใน CSS

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

เพื่อทำให้องค์ประกอบถูกจัดวางตำแหน่งแบบสัมบูรณ์ จำเป็นต้องกำหนดคุณสมบัติ position ให้กับองค์ประกอบนี้ ด้วยค่า absolute นอกจากคุณสมบัตินี้แล้ว ยังต้องการ อีกสองคุณสมบัติ: อันหนึ่งจะกำหนดพิกัดตามแนวตั้ง และอีกอันหนึ่ง - ตามแนวนอน

สำหรับแนวตั้ง ต้องกำหนดระยะห่างจากด้านบน หรือจากด้านล่าง ระยะห่างจากด้านบนกำหนดโดยคุณสมบัติ top และระยะห่างจากด้านล่าง - โดยคุณสมบัติ bottom สำหรับแนวนอน ต้องกำหนดระยะห่างจากด้านซ้าย หรือจากด้านขวา ระยะห่างจากด้านซ้ายกำหนดโดยคุณสมบัติ left และระยะห่างจากด้านขวา - โดยคุณสมบัติ right

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

ตัวอย่าง

เริ่มต้น มาสร้างสองบล็อก โดยไม่มีการจัดวางตำแหน่ง (โปรดสังเกต ว่าองค์ประกอบไม่ได้ชิดขอบหน้าต่าง เนื่องจาก body มี margin ตามค่าเริ่มต้น):

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

ตอนนี้ มาทำให้บล็อกสีเขียวมีการจัดวางตำแหน่งแบบสัมบูรณ์ โดยวางไว้ที่ตำแหน่ง จากด้านบน 150px และจากด้านซ้าย 100px:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 150px;
  left: 100px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านบนและ 0px จากด้านซ้าย:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านบนและ 0px จากด้านขวา:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านล่างและ 0px จากด้านขวา:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตัวอย่าง

ตอนนี้ มาวางบล็อกสีเขียวที่ตำแหน่ง 0px จากด้านล่างและ 0px จากด้านซ้าย:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

แบบฝึกหัดปฏิบัติ