วิธีใส่องค์ประกอบที่ด้านล่างของคอนเทนเนอร์ด้วย CSS

เรียนรู้วิธีใส่องค์ประกอบที่ด้านล่างของคอนเทนเนอร์ด้วย CSS

HTML มีความสัมพันธ์แบบ parent-child ในการวางองค์ประกอบที่ด้านล่างของคอนเทนเนอร์ด้วย CSS คุณต้องใช้คุณสมบัติและค่าต่อไปนี้:

• position: relative; (แม่)
• position: absolute; (ลูก)
• bottom: 0; (ลูก)

ตัวอย่าง:

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
}

เพื่อให้เห็นภาพได้ง่ายขึ้น ฉันจึงใช้คลาส CSS จากด้านบนและเพิ่มความกว้าง ความสูง และสีให้กับคลาสเหล่านี้:

.parent {
  position: relative;
  background-color: black;
  height: 200px;
  width: 200px;
}

.child {
  position: absolute;
  bottom: 0;
  background-color: darkred;
  height: 50px;
  width: 50px;
}

ผลลัพธ์:

ดังที่คุณเห็นในตัวอย่างข้างต้น องค์ประกอบย่อยจะถูกตรึงไว้ที่ด้านซ้ายของคอนเทนเนอร์โดยอัตโนมัติ

หากคุณต้องการใส่องค์ประกอบย่อยที่ด้านล่างขวา คุณต้องระบุโดยตรงในองค์ประกอบย่อยด้วย right คุณสมบัติ:

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

ผลลัพธ์: