CSS：右下に要素を配置する方法？

101

右下隅にテキスト要素「5日前にベット」を配置しようとしています。どうすればこれを達成できますか？さらに重要なことに、CSSを征服できるように説明してください！

代替テキスト

css

— ケルイリン
ソース

あなたが現在持っているあなたのHTMLとCSSを私たちに見せてくれればもっと簡単でしょう。

— ジョンハートソック

CSSの征服については、books.google.ie / books / about

— フィリップマーフィー

回答:

218

HTMLが次のようになっているとします。

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

次に、CSSを使用して、そのテキストを右下に次のように表示できます。

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

これが機能する方法は、絶対配置された要素が常に最初に相対的に配置された親要素、つまりウィンドウに対して配置されることです。ボックスの位置を相対位置に設定したため、ボックスの.bet_time右端を右端.boxに、下端を下端に配置します。.box

— オースティンハイド
ソース

しかし、.boxそれ自体がそうでなければならない場合、それを解決するにはどうすればよいposition:absoluteですか？不可能な？

— ブラックブラック

あなた.boxはまだposition:relativeです。

— ブラック

.box2isposition:absolute

— オースティンハイド

親を次のように設定する必要があるかもしれませんdisplay:inline-block;

— BillyNair 2016

コンテナは相対的である必要があり、その中のコンテンツはポジショニングのために絶対的である必要があります。感謝

— Haryono Sariputra

position: relative;ボックスにCSS を設定します。これにより、内部のオブジェクトのすべての絶対位置がそのボックスのコーナーを基準にして相対的になります。次に、「Bet 5 days ago」行に次のCSSを設定します。

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

テキストを端から離して配置する必要がある場合は0、2pxまたはに変更できます。

— お立ちください
ソース