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 в строке «Ставка 5 дней назад»:

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

Если вам нужно расположить текст дальше от края, вы можете изменить его 0на 2pxили аналогичный.