CSS: come posizionare l'elemento in basso a destra?

Question

Sto provando a posizionare l'elemento di testo "Scommetti 5 giorni fa" nell'angolo in basso a destra. Come posso realizzare questo? E, cosa più importante, ti prego di spiegare in modo da poter conquistare CSS!

Answer 1

permette di dire il codice HTML simile a questa:

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

Poi, con i CSS, si può fare che il testo appare in basso a destra in questo modo:

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

Il modo in cui funziona è quegli elementi posizionati in modo assoluto sono sempre posizionati rispetto al primo elemento genitore relativamente posizionato o alla finestra. Perché abbiamo impostato la posizione della casella per parente, .bet_time posiziona il bordo destro al bordo destro della .box e il suo bordo inferiore al bordo inferiore della .box

Answer 2

Impostare il CSS position: relative; sulla scatola. Questo fa sì che tutte le posizioni assolute degli oggetti all'interno siano relative agli angoli di quella casella. Quindi impostare il seguente CSS sulla linea "Bet 5 giorni fa":

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

Se avete bisogno di spazio il testo più lontano dal bordo, si potrebbe cambiare 0-2px o simili.