오버플로 표시 : 상위 (위치 : 상대적)에 의해 숨김

Question

.product { 
    position:relative; 
    width:300px; 
    height:200px; 
    overflow:visible; 
} 

.menu { 
    position:absolute; 
    width:200px; 
    height:400px; 
} 

<div class="product"> 
    <div class="menu></div> 
</div> 

메뉴는 상위 제품으로 숨겨져 있습니다. 제품 오버플로가 보입니다. 메뉴를 완벽하게 표시하려면 어떻게해야하나요? 제품 위치는 상대적이며 은 변경할 수 없습니다.

메뉴가 숨겨져 있으며 마우스 오버시 표시됩니다.

수정 ---------

위의 코드가 작동합니다. 다음 제품으로 클리핑되기 때문에 메뉴가 완전히 보이지 않습니다. 따라서 z- 인덱스를 1000으로 설정하십시오. 그러나

.product { 
     position:relative; 
     width:300px; 
     height:200px; 
     overflow-x:hidden; 
     overflow-y:visible; 
    } 

이 작동하지 않습니다. overflow-y : auto와 같은 세로 스크롤이 있습니다. 왜?

Answer 1

바로 아래에있는 경우 여백이나 여백을 추가 할 수 있습니다. 그러나 실제로하는 일을 실제로 볼 수는 없으므로 아마도 바이올린을 만들 수 있습니다.

.product { 
position:relative; 
width:300px; 
height:200px; 
padding: 10px; 
overflow:visible; 
} 

.menu { 
position:absolute; 
width:200px; 
height:400px; 
padding: 10px; 
}