인프런 커뮤니티 질문&답변

position: absolute인 엘리먼트는, block 엘리먼트라고 하더라도 폭이 알아서 늘어나지 않습니다.

<div class="foo">AAA</div>

.foo {
    position: absolute;
    left: 0;
    top: 0;
    background: red;
}

이렇게 테스트 해보시면, 빨간 영역이 AAA  만큼만 되는걸 확인하실 수 있을 거에요.
position: absolute를 제거하면 가로로 꽉 차고요.
div같은 block 엘리먼트는 원래 기본적으로 width가 부모 엘리먼트의 폭만큼 늘어나지만,
position: absolute가 들어가면 그렇게 동작하지 않고 내가 가진 콘텐츠 만큼만 늘어나기 때문에
width: 100%로 늘려주어야한다는 이야기입니다^^
위 코드에 width: 100%를 추가하시면 쫙 늘어날거에요!

답변감사합니다. 해피추석되세요 ^^