CSS: cómo colocar el elemento en la esquina inferior derecha?

Question

Estoy tratando de colocar el elemento de texto "Apuesta hace 5 días" en la esquina inferior derecha. ¿Cómo puedo lograr esto? Y, lo que es más importante, ¡explíquelo para poder conquistar CSS!

Answer 1

permite decir su HTML es como la siguiente:

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

Luego, con CSS, puede hacer que el texto aparezca en la parte inferior derecha de este modo:

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

La forma en que esto funciona es que los elementos absolutamente posicionados siempre se posicionan con respecto al primer elemento principal relativamente posicionado, o la ventana. Debido a que hemos creado la posición de la caja de relativo, .bet_time posiciona su extremo derecho con el borde derecho de .box y su borde inferior hasta el borde inferior de .box

Answer 2

Establecer la CSS position: relative; en la caja. Esto hace que todas las posiciones absolutas de los objetos en el interior sean relativas a las esquinas de esa caja. A continuación, establezca el siguiente CSS en la línea de "Bet hace 5 días":

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

Si necesita espacio el texto más lejos del borde, que podría cambiar 0 a 2px o similar.