[CSS] absolute를 한 요소가 안 먹힐 때

스크롤을 통해 가로로 페이지 이동을 하려고 아래와 같은 형태의 구조로 만들었다. 

<div id='스크롤적용'>
	<div id='전체 item 감싸줌'>
    	<div id='item'>        	
            <div>1번요소 여기서 absolute를 적용한 이미지와 텍스트가 있었음</div>
        </div>
        <div id='item'>
        	<div>2번요소</div>
        </div>
        <div id='item'>
        	<div>3번요소</div>
        </div>
    </div>
</div>

여기서 생긴 문제점은 absolute 를 먹인 이미지와 텍스트가 스크롤 적용한 div에 안 들어오고 저 멀리 밀려나가 돌아오지 않았다.

#스크롤적용 {
	display: flex; 
    overflow-x: scroll;
}

 

돌아오게 하는 방법은 overflow가 먹혀있는 요소의 부모 요소에 아래의 postion을 먹여주면 다시 돌아온다. 

position: relative;

 

나의 경우는 저기 item 에 먹여주었다. 

 

사실 리액트 styled component를 사용해서 구현중이지만 예시로 그냥 적어봤다..

다음엔 잊지말아야지