CSS: как позиционировать элемент в правом нижнем углу?

Я пытаюсь позиционировать текстовый элемент "Ставка 5 дней назад" в нижнем правом углу. Как я могу это сделать? И, что еще более важно, объясните, чтобы я мог завоевать CSS!

Ответ 1

Давайте скажем, что ваш 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

Ответ 2

Установите CSS position: relative; в поле. Это приводит к тому, что все абсолютные положения объектов внутри будут относиться к углам этого окна. Затем установите следующий CSS в строке "Bet 5 дней назад":

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

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