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
8
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
26

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