เรียนรู้วิธีวางอีเลเมนต์ไว้ด้านล่างของ container ด้วย CSS
HTML มีความสัมพันธ์ parent-child วางอีเลเมนต์ล่าง container ต้องใช้:
position: relative;(parent)position: absolute;(child)bottom: 0;(child)
ตัวอย่าง:
<div class="parent"> <div class="child"> </div> </div>.parent { position: relative; } .child { position: absolute; bottom: 0; }เพื่อให้เห็นภาพชัด เพิ่ม width, height, colors:
.parent { position: relative; background-color: black; height: 200px; width: 200px; } .child { position: absolute; bottom: 0; background-color: darkred; height: 50px; width: 50px; }ผลลัพธ์: child element จะถูกปักหมุดไปทางซ้ายอัตโนมัติ
อยากวาง bottom-right ให้ระบุ right property บน child:
.child { position: absolute; bottom: 0; right: 0; }ผลลัพธ์:
