웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS에서 overflow hidden을 avoid, 적용하지 않는 방법은?

Last Modified : 2018-07-09 / Created : 2017-07-04
13,782
View Count
CSS를 사용하면서 가장 많이 나타나는 이슈 중 하나라고 개인적으로 생각합니다. 바로 overflow: hidden 적용에 따른 layer가 보이지 않는 버그 또는 이슈사항입니다.

만약 부모 요소가 overflow: hidden 속성이 적용된 경우 자식 요소의 레이어는 부모 요소의 내부로 제안됩니다. 하지만 다양한 디바이스 환경에서 다이나믹환 레이어를 적용해야되는 경우 이는 큰 제약사항이 될 수 있습니다. 이를 해결하는 방법은 무엇이 있을까요?



# 부모 요소의 overflow: hidden을 제거하는 방법

가장 간단한 방법입니다. 하지만 overflow를 부모 요소에 적용한 경우 그 이유가 있을 것이라 생각할 수 있습니다. 일반적으로 overflow 속성은 자식 속성의 영역을 부모가 가지지 않는 경우 적용하기 위한 약간의 트릭으로 많이 사용됩니다. 이런 경우가 아니라면 overflow 속성을 제거하는 것이 좋을 것입니다.



# 해당 요소를 부모 밖으로 이동하는 방법

만약 부모 요소 밖으로 이동할 수 있다면 이 역시 간단한 방법입니다. 하지만 이벤트나 내부 콘텐츠가 많다면 이 역시 노력과 시간이 많이 필요합니다.



# 해당 요소의 position 속성을 fixed로 변경하는 방법

; 이 역시 매우 간단한 방법입니다. 이때 top, bottom, left, right 속성을 지정하지 않아야하며 위치 조정이 필요한 경우 margin을 적절하게 사용합니다. 다만 스크롤을 이동할 수 있는 환경이라면 fixed 레이어가 계속 고정된다는 단점이 있습니다.


Previous

이미지 스프라이트 방법시 장점 및 단점과 고려할 사항은?

Previous

CSS3 animation 프로퍼티를 사용한 애니메이션 구현하기