[overflow] 위메프 따라하기 중 카테고리를 펼치자 아래 영역이 내려가 버림 | 해결 방법

 

 

 

😑 문제가 발생한 이유 

아래 div와 위의 카테고리창을 같은 급의 개체로 인식을 하고 있는 것

 

 

 

🔍 체크 사항

1. 부모태그에 overflow:hidden; 이 되어있는지 체크

( 부모태그에 overflow:hidden을 하면 부모요소가 자식을 찾게 됌, 붙잡아주는 역할을 하는 격)

2. 전체 최상위 부모에 float:left; 가 되어 있는지 체크

3. 애초에 구조를 짤 때 시멘틱 태그로 구조를 잘 잡기

 

 

        .bottom{
            float:left;
            width:1300px;
            height:550px;
            position:absolute;
            overflow:hidden;
           
        }


        .bottom_menu{

            width:1084px;
            margin-left:80px;

        }

        .bottom1{
         
            float:left;
            position:absolute;
            margin:0 auto;
                 
        }

        .catebotton{

            width:146px;
            height:39px;
            cursor:pointer;
       
        }

        .catebotton img{
            width:146px;
            height:39px;
            cursor:pointer;

        }

         /* 카테고리 */

         .cate{
            float:left;
            font-size:11px;
            position:relative;
            background-color: white;  
        }

 

 

👉 내가 수정한 내용

1. 시멘틱 태그 이용하여 구조를 다시 제대로 정리
2. 원래 카테고리창을 카테고리 버튼 아래에 두었었는데, 큰 div 안에 카테고리 버튼과 카테고리창을 묶었다.
3. bottom1 에 의 position:absolute; 를 주고 cate에 position:relative; 적용
4. bottom(전체 div태그)에 position:absolute;를 주고 overflow:hidden 을 적용!!

 

 

🙄 다시 정리하는 overflow 역할 

1. overflow: visible;

특정 부분이 부모div를 초과해도 그대로 보여준다

2. overflow: hidden;

부모div의 범위를 초과하면 초과된 자식요소의 부분은 보이지 않도록 처리

3. overflow: auto;

부모div의 범위를 넘어가는 자식요소의 부분이 있을 경우 넘어간 부분은 보이지 않도록 처리하고, 넘어간 부분은 스크롤바로 표시되어 확인할 수 있도록 표시 

overflow-x | overflow-y

overflow 속성은 가로 부분과 세로 부분 모두에 일괄적으로 적용되는 속성인데

가로부분의 넘치는 부분은 감추는 부분은 감추고, 세로 부분의 넘치는 부분은 그대로 보여주고 싶을 때가 있다.

그 때는 overflow-x 와 overflow-y 를 아래와 같이 사용하기 👇

.parent { overflow-x: hidden; overflow-y: visible; }