CSS: จะวางตำแหน่งองค์ประกอบด้านขวาล่างได้อย่างไร?

ฉันกำลังพยายามจัดตำแหน่งองค์ประกอบข้อความ "เดิมพันเมื่อ 5 วันก่อน" ที่มุมล่างขวา ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร? และที่สำคัญกว่านั้นโปรดอธิบายเพื่อให้ฉันสามารถพิชิต CSS ได้!

สมมติว่า HTML ของคุณมีลักษณะดังนี้:

<div class="box">
    <!-- stuff -->
    <p class="bet_time">Bet 5 days ago</p>
</div>

จากนั้นด้วย CSS คุณสามารถทำให้ข้อความนั้นปรากฏที่ด้านล่างขวาดังนี้:

.box {
    position:relative;
}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;
}

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

ตั้งค่า CSS position: relative;บนกล่อง ทำให้ตำแหน่งที่แน่นอนทั้งหมดของวัตถุภายในสัมพันธ์กับมุมของกล่องนั้น จากนั้นตั้งค่า CSS ต่อไปนี้ในบรรทัด "Bet 5 days ago":

position: absolute;
bottom: 0;
right: 0;

หากคุณต้องการเว้นวรรคข้อความให้ห่างจากขอบมากขึ้นคุณสามารถเปลี่ยน0เป็น2pxหรือคล้ายกันได้