[CSS] 부모 요소의 overflow 속성 무시하는 방법

가끔씩 컴포넌트를 만들다 보면 overflow 속성을 사용하는 경우가 많다.

~overflow:scroll~으로 스크롤이 발생하도록 하거나,

~overflow:hidden~으로 숨기거나 하는 등 말이다.

 

그런데, overflow 속성을 사용하여 자식 요소들을 숨겼지만, 

자식의 자식 요소를 다시 화면에 노출시켜야 하는 경우도 있다.

이때는 자식 요소를 아무리 화면에 노출시키기 위해 노력해도 잘 나타나지 않는다.

 

부모 요소의 overflow 속성 무시하는 방법

부모 요소에 ~position: relative~ 속성을 넣어 absolute가 동작하도록 하고,

~position: absolute~ 속성을 가지는 wrapper를 하나 만든 뒤 그 안에 내가 화면에 노출시키고 싶은 요소를 ~position: fixed~와 ~top~같은 위치를 지정하는 속성을 추가해 주면 된다.

​.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}