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

101

Sto cercando di posizionare l'elemento di testo "Scommetti 5 giorni fa" nell'angolo in basso a destra. Come posso farlo? E, cosa più importante, per favore spiegami così posso conquistare CSS!

testo alternativo

css

— keruilin
fonte

Sarebbe più facile se ci mostrassi il tuo HTML e CSS che hai attualmente.

— John Hartsock

Per conquistare CSS, consiglio vivamente il seguente libro books.google.ie/books/about/…

— Philip Murphy,

Risposte:

219

Diciamo che il tuo HTML assomiglia a questo:

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

Quindi, con CSS, puoi far apparire quel testo in basso a destra in questo modo:

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

Il modo in cui funziona è che gli elementi posizionati in modo assoluto sono sempre posizionati rispetto al primo elemento genitore posizionato relativamente, o alla finestra. Poiché abbiamo impostato la posizione della casella su relativa, .bet_timeposiziona il suo bordo destro sul bordo destro di .boxe il suo bordo inferiore sul bordo inferiore di.box

— Austin Hyde
fonte

Ma come risolverlo se .boxdeve esserlo position:absolute? Impossibile?

— Nero

Il tuo .boxè fermo position:relative.

— Nero

.box2èposition:absolute

— Austin Hyde

Potrebbe essere necessario impostare il genitore comedisplay:inline-block;

— BillyNair

il contenitore deve essere relativo e il contenuto in esso deve essere assoluto per il posizionamento, geniale! grazie

— Haryono Sariputra

Imposta il CSS position: relative;sulla scatola. Ciò fa sì che tutte le posizioni assolute degli oggetti all'interno siano relative agli angoli di quella scatola. Quindi imposta il seguente CSS sulla riga "Scommetti 5 giorni fa":

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

Se hai bisogno di spaziare il testo più lontano dal bordo, puoi cambiare 0in 2pxo simile.

— Per favore alzati
fonte