[CSS] position:fixed 사용시 width가 변하는 현상

프론트엔드 개발의 가장 어려운 부분은 css 인 것 같다. 

내가 전혀 의도하지 않은 동작이 일어나고 있어서 수정해보려고 한다.

 

현상

 

- position: fixed를 이용하여 스크롤과 함께 같이 내려오는 기능을 구현함(우측 TEST 부분) 

- position이 변경되는 경계에서 화면 전체 UI가 밀리면서 width가 변경되는 현상이 발생함

 

 

 

 

 

 

 

 

기존 코드

 <div
    style={{
      position: fixed ? "fixed" : "relative",
      top: fixed ? `${HEADER_HEIGHT}px` : "0px", 
    }}
>

 

 

 

 

 

수정한 코드

<div
    style={{
      position: fixed ? "fixed" : "absolute", // 수정
      top: fixed ? `${HEADER_HEIGHT}px` : `700px`, 
      width: "354px", // 추가
    }}
>

 

- fixed가 아닌 상태의 position을 absolute로 수정해 주었다. 

- fixed일 경우엔 상위(부모)의 width를 전혀 가지고 오지 못하기 때문에 width를 지정해 주었음.  

 

 

수정 결과

 

 

 

- `예약 가이드` 경계와 함께 우측 정보가 함께 내려옴 

- 의도한 대로 동작함 

 

 

 

 

 

 

요약

 

- `position: fixed` 사용시 width를 지정해주어야 함 

- 기능 수정하면서 X마켓 코드 CSS 살펴보고 참고함. 참고할 만한 좋은 레퍼런스를 찾아보고, 내부 코드를 살펴보는 좋은 경험이였음