ECサイトの商品カードや、ブログの記事一覧を作っているとき、こんな悩みはありませんか？
「商品名や価格の長さがバラバラでも、『カートに入れる』ボタンだけは常に右下に揃えたい」
Flexbox（display: flex）を使っていると、要素の高さが揃うのは便利ですが、特定の要素だけを隅っこに固定したい場合に少し工夫が必要です。
今回は、親要素がFlexboxであっても使える、「position: absolute」を使った配置テクニックを解説します。
方法：position: absolute で強制的に配置する
結論から言うと、Flexboxのルールを「無視」させるのが手っ取り早いです。
実装コード
/* 親要素（カード全体など） */
.box {
display: flex; /* Flexboxが効いていてもOK */
position: relative; /* 子要素の基準点にする */
/* 必要に応じて高さや幅を指定 */
height: 200px;
width: 100%;
}
/* 子要素（右下に置きたい要素） */
.list {
position: absolute; /* Flexの並び順から離脱させる */
right: 0; /* 右端に */
bottom: 0; /* 下端に */
}なぜこれで動くのか？
通常、Flexアイテム（子要素）は親の display: flex の影響を受けて整列します。 しかし、子要素に position: absolute を指定すると、その要素は「通常の文書の流れ（Flexの並び順）」から外れます（浮いた状態になります）。
浮いた要素は、position: relative が指定されている親要素（.box）の枠を基準にして、絶対的な位置（右下）に配置されます。
この手法のメリット・デメリット
- メリット
- 他の兄弟要素の内容量（テキスト量など）に関係なく、絶対に右下に固定できる。
- 画像の上にバッジ（SALEやNEW）を重ねる場合にも使える。
- デメリット
- 「浮いている」ため、他の文字と重なってしまう（被ってしまう） 可能性がある。
- 余白（padding）を考慮しないと、枠線ギリギリに配置されてしまう。
【応用】重なりを防ぎたいなら「margin: auto」を使う
もし、「文字と重なるのは困る」「Flexboxのルールのまま右下に配置したい」という場合は、margin を使う方法が安全です。
/* 親要素 */
.box {
display: flex;
flex-direction: column; /* 縦並びの場合 */
height: 200px;
}
/* 子要素（右下に置きたい要素） */
.list {
margin-top: auto; /* 上側の余白を自動で埋める＝下に押し出される */
margin-left: auto; /* 左側の余白を自動で埋める＝右に押し出される */
}この方法なら、要素は「浮いていない」ので、他のテキストと重なることはありません。
まとめ
親要素（.box）に
position: relative;
子要素（.list）に
position: absolute;
right: 0;
bottom: 0;
を当てる。
親要素（.box）に例えばdisplay:flexが一緒にあったとしても以下の方法で揃います。
.box {
position: relative;
}
.list {
position: absolute;
right: 0;
bottom: 0;
}絶対配置（absolute）
強制的に右下に固定したい時。バッジや、絶対に位置をズラしたくないボタンに最適。
自動余白（margin: auto）
レイアウト崩れを防ぎながら、自然に右下に寄せたい時。
「今のデザインだと、どっちを使えば崩れない？」と迷った際は、お気軽にご相談ください。
