オーバーフロー表示：親（位置：相対）

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-indexを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; 
}