CSS: jak umieścić element w prawym dolnym rogu?

101

Próbuję umieścić element tekstowy „Postaw 5 dni temu” w prawym dolnym rogu. Jak mogę to osiągnąć? A co ważniejsze, proszę o wyjaśnienie, abym mógł podbić CSS!

tekst alternatywny

css

— keruilin
źródło

Byłoby łatwiej, gdybyś pokazał nam swój kod HTML i CSS, które obecnie posiadasz.

— John Hartsock,

Na temat podboju CSS gorąco polecam następującą książkę books.google.ie/books/about/ ...

— Philip Murphy,

Odpowiedzi:

219

Powiedzmy, że Twój kod HTML wygląda mniej więcej tak:

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

Następnie za pomocą CSS możesz sprawić, że tekst pojawi się w prawym dolnym rogu w następujący sposób:

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

Sposób, w jaki to działa, polega na tym, że elementy pozycjonowane absolutnie są zawsze pozycjonowane względem pierwszego elementu nadrzędnego względnie pozycjonowanego lub okna. Ponieważ ustawiamy położenie pudełka na względne, .bet_timeustawia jego prawą krawędź do prawej krawędzi, .boxa dolną krawędź do dolnej krawędzi.box

— Austin Hyde
źródło

Ale jak to rozwiązać, jeśli .boxsam musi być position:absolute? Niemożliwy?

— Czarny

Twoje .boxjest nadal position:relative.

— Black

.box2jestposition:absolute

— Austin Hyde

Konieczne może być ustawienie rodzica nadisplay:inline-block;

— BillyNair.

pojemnik musi być względny, a zawartość w nim musi być absolutna do pozycjonowania, genialna! dzięki

— Haryono Sariputra

Ustaw CSS position: relative;na pudełku. Powoduje to, że wszystkie bezwzględne pozycje obiektów w środku są względem rogów tego pola. Następnie ustaw następujący CSS w wierszu „Postaw 5 dni temu”:

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

Jeśli chcesz umieścić tekst dalej od krawędzi, możesz zmienić go 0na 2pxlub podobnie.

— Proszę wstać
źródło