CSS: Wie positioniere ich das Element unten rechts?

100

Ich versuche, das Textelement "Wette vor 5 Tagen" in der unteren rechten Ecke zu positionieren. Wie kann ich das erreichen? Und was noch wichtiger ist, erklären Sie es bitte, damit ich CSS erobern kann!

Alt-Text

css

— Keruilin
quelle

Wäre einfacher, wenn Sie uns Ihr HTML und CSS zeigen würden, das Sie derzeit haben.

— John Hartsock

Zur Eroberung von CSS würde ich das folgende Buch books.google.ie/books/about/…

— Philip Murphy

Antworten:

217

Nehmen wir an, Ihr HTML sieht ungefähr so aus:

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

Mit CSS können Sie diesen Text dann wie folgt unten rechts anzeigen:

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

Dies funktioniert so, dass absolut positionierte Elemente immer in Bezug auf das erste relativ positionierte übergeordnete Element oder das Fenster positioniert werden. Da wir die Position der Box auf relativ setzen, .bet_timepositioniert sie ihre rechte Kante an der rechten Kante von .boxund ihre untere Kante an der unteren Kante von.box

— Austin Hyde
quelle

Aber wie kann man es lösen, wenn es .boxselbst sein muss position:absolute? Unmöglich?

— Schwarz

Dein .boxist still position:relative.

— Schwarz

.box2istposition:absolute

— Austin Hyde

Möglicherweise müssen Sie den Elternteil aufdisplay:inline-block;

— BillyNair

Behälter muss relativ sein, und der Inhalt darin muss für die Positionierung absolut sein, brillant! danke

— Haryono Sariputra

Stellen Sie das CSS position: relative;auf der Box ein. Dies bewirkt, dass alle absoluten Positionen von Objekten innerhalb relativ zu den Ecken dieses Felds sind. Stellen Sie dann das folgende CSS in die Zeile "Wette vor 5 Tagen" ein:

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

Wenn Sie den Text weiter vom Rand entfernt platzieren müssen, können Sie 0zu 2pxoder ähnlichem wechseln .

— PleaseStand
quelle