position: absolute는 flexbox와 충돌할까? 올바른 사용 방법

position: absolute는 flexbox와 충돌하지 않습니다

position: absolute는 flex 컨테이너와 충돌하지 않습니다. 다만 주의할 점이 있습니다. 절대 위치(absolute)로 지정된 요소는 일반적인 문서 흐름에서 벗어나기 때문에, flex 레이아웃의 정렬 속성(justify-content, align-items 등)이 해당 요소 자체에는 적용되지 않습니다.

따라서 flex 속성과 함께 position: absolute를 사용하려면 부모 요소의 너비(width)와 위치 기준값을 반드시 함께 설정해야 합니다.

CSS 예제

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

위 예제에서 width: 100%를 지정하는 이유는, position: absolute가 적용된 요소는 내용 크기만큼만 너비를 가지게 되어 justify-content: center가 시각적으로 효과가 없어 보일 수 있기 때문입니다. 전체 너비를 지정하면 가운데 정렬이 의도한 대로 동작합니다.

HTML 구조

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

추가 팁

실무에서는 부모 요소에 position: relative를 설정하고, 자식 요소에 position: absolute를 적용한 뒤 left, top 또는 inset 속성으로 위치를 조정하는 패턴이 일반적입니다. 또한 최신 CSS에서는 inset: 0과 margin: auto를 조합하거나, flex 컨테이너 안에서 place-items를 활용해 중앙 정렬을 더 간단하게 구현할 수 있습니다.