「position: absolute」とFlexboxは競合する？併用時の正しい書き方を解説

position: absoluteとFlexboxは競合しない

結論から言うと、position: absolute（絶対配置）はフレックスコンテナ（display: flex）と競合しません。両者は問題なく併用できます。

ただし、絶対配置を使う場合は、親要素の幅（width）などの値も一緒に指定する必要があります。幅を指定しないと、絶対配置された要素は中身のサイズに合わせて縮んでしまうため、意図した通りのレイアウトになりません。

CSSの記述例

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width: 100%;
}

この例では、親要素（.parent）をフレックスコンテナとして中央寄せを設定しつつ、絶対配置で全幅に広げるためにwidth: 100%を指定しています。display: flexとposition: absoluteが同じ要素に共存しても、エラーにはならず正常に動作します。

HTMLの記述例

<div class="parent">
   <div class="child">text</div>
</div>

補足：フレックスアイテム側を絶対配置する場合の注意点

親要素ではなく子要素（フレックスアイテム）にposition: absoluteを指定した場合、その子要素は通常フローから切り離され、フレックスレイアウトの制御対象から外れます。この場合も「競合」は発生しませんが、justify-contentやalign-itemsによる整列は効かなくなるため、位置指定にはtop・left・right・bottomなどのプロパティを使用します。

このように、絶対配置とFlexboxは役割が異なるため干渉することはありません。ただし、基準となる親要素にposition: relativeを設定しておくなど、配置の基準を明確にしておくことで、より安定したレイアウトを実現できます。