คุณสมบัติ position

คุณสมบัติ position กำหนดวิธีการจัดตำแหน่ง ขององค์ประกอบ คุณสมบัตินี้ส่วนใหญ่ มักใช้ร่วมกับคุณสมบัติ top, right, bottom, left, ซึ่งกำหนดระยะห่าง จากด้านบน, ขวา, ล่าง, ซ้าย ตามลำดับ

ไวยากรณ์

cssselector {
  position: absolute | relative | fixed | static | sticky;
}

ค่าของ position

ค่าเริ่มต้น: static

ตัวอย่าง การจัดตำแหน่งแบบสัมบูรณ์

มาจัดวางองค์ประกอบที่มุมซ้ายบน ของหน้าจอโดยมีระยะห่างเล็กน้อย:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

ตัวอย่าง การจัดตำแหน่งแบบสัมบูรณ์

และตอนนี้มาจัดวางองค์ประกอบที่มุมขวาบน ของหน้าจอโดยมีระยะห่างเล็กน้อย:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

ตัวอย่าง การจัดตำแหน่งแบบตรึงที่

ด้วยการจัดตำแหน่งแบบตรึงที่ องค์ประกอบ จะยังคงอยู่ที่เดิมเมื่อเลื่อน:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

ตัวอย่าง การจัดตำแหน่งแบบสัมพัทธ์

ด้วยการจัดตำแหน่งแบบสัมพัทธ์ องค์ประกอบจะถูกเคลื่อนย้าย เทียบกับตำแหน่งปกติของมัน แต่องค์ประกอบอื่นๆ ยังคงทำงาน ราวกับว่าองค์ประกอบไม่ได้ถูกเคลื่อนย้าย:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

ตัวอย่าง การซ้อนกัน

หาก parent มีคุณสมบัติ position เป็นค่า relative องค์ประกอบที่ถูกจัดตำแหน่งแบบสัมบูรณ์ จะถูกจัดตำแหน่งเทียบกับ parent:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

ตัวอย่าง การซ้อนกัน

หาก parent มีคุณสมบัติ position เป็นค่า absolute องค์ประกอบที่ถูกจัดตำแหน่งแบบสัมบูรณ์ จะถูกจัดตำแหน่งเทียบกับ parent:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

ตัวอย่าง การจัดตำแหน่งแบบติด

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

html<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

ตัวอย่าง ไม่มีตำแหน่ง

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

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

ตัวอย่าง แกนเดียว

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

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

ตัวอย่าง ทุกตำแหน่ง

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

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

ดูเพิ่มเติม