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

101

Estoy intentando 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ícame para que pueda conquistar CSS!

texto alternativo

css keruilin
fuente
8
Sería más fácil si nos mostrara su HTML y CSS que tiene actualmente.
John Hartsock
Sobre la conquista de CSS, recomiendo encarecidamente el siguiente libro books.google.ie/books/about/…
Philip Murphy

Respuestas:

219

Digamos que su HTML se parece a esto:

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

Luego, con CSS, puede hacer que ese texto aparezca en la parte inferior derecha así:

.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 padre relativamente posicionado, o la ventana. Debido a que establecemos la posición de la caja en relativa, .bet_timecoloca su borde derecho al borde derecho de .boxy su borde inferior al borde inferior de.box

Austin Hyde
fuente
Pero, ¿cómo solucionarlo si .boxtiene que serlo position:absolute? ¿Imposible?
Negro
Tu .boxestá quieto position:relative.
Negro
.box2esposition:absolute
Austin Hyde
Es posible que deba configurar el padre para que seadisplay:inline-block;
BillyNair
El contenedor debe ser relativo, y el contenido en él debe ser absoluto para el posicionamiento, ¡genial! gracias
Haryono Sariputra
26

Configure el 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. Luego, configure el siguiente CSS en la línea "Apuesta hace 5 días":

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

Si necesita espaciar el texto más lejos del borde, puede cambiar 0a 2pxo similar.

Por favor levantese
fuente