CSS: como posicionar o elemento no canto inferior direito?

101

Estou tentando posicionar o elemento de texto "Aposta 5 dias atrás" no canto inferior direito. Como posso fazer isso? E, mais importante, explique para que eu possa conquistar CSS!

texto alternativo

css

— Keruilin
fonte

Seria mais fácil se você nos mostrasse o HTML e CSS que possui atualmente.

— John Hartsock,

Sobre conquistar CSS, eu recomendo fortemente o seguinte livro books.google.ie/books/about/…

— Philip Murphy,

Respostas:

219

Digamos que seu HTML seja parecido com isto:

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

Então, com CSS, você pode fazer esse texto aparecer no canto inferior direito assim:

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

A maneira como isso funciona é que os elementos absolutamente posicionados são sempre posicionados em relação ao primeiro elemento pai relativamente posicionado, ou a janela. Como definimos a posição da caixa como relativa, .bet_timeposiciona sua borda direita na borda direita de .boxe sua borda inferior na borda inferior de.box

— Austin Hyde
fonte

Mas como resolver se .boxtem que ser position:absolute? Impossível?

— Preto de

Você .boxainda está position:relative.

— Black

.box2éposition:absolute

— Austin Hyde

Você pode precisar definir o pai para serdisplay:inline-block;

— BillyNair

O contêiner deve ser relativo, e o conteúdo nele deve ser absoluto para o posicionamento, brilhante! obrigado

— Haryono Sariputra

Defina o CSS position: relative;na caixa. Isso faz com que todas as posições absolutas dos objetos internos sejam relativas aos cantos da caixa. Em seguida, defina o seguinte CSS na linha "Aposte 5 dias atrás":

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

Se precisar espaçar o texto mais longe da borda, você pode alterar 0para 2pxou algo semelhante.

— Fique por favor
fonte