ให้ข้อความ (หรือกรอบ) ชิดด้านล่างของกรอบ (อีกที)
<style type="text/css">
.container {
width:100%;
height:100px; /* ต้องกำหนดความสูงให้คงที่ */
border:1px solid red; /* กำหนดกรอบให้เห็นภาพ */
position:relative; /* กำหนดให้เป็น container */
}
.bottom {
position:absolute; /* ตำแหน่งเทียบกับ container */
bottom:0; /* กำหนดให้ชิดด้านล่าง */
text-align:center; /* 2 บรรทัดนี้ถ้าต้องการให้ข้อความอยู่กลาง */
width:100%;
border:1px solid green; /* กำหนดกรอบให้เห็นภาพ */
}
</style><div class="container"><div class="bottom">text</div></div>
ตัวอย่างจะเห็นข้อความติอยู่ด้านล่างตลอด สามารถประยุกต์ใช้กับ layout หรือ กรอบเช่นกรอบข่าวที่มี เมนูอยู่ด้านล่างได้
ตัวอย่าง