переполнение видимое: скрыто от родителя (позиция: относительное)

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> 

Меню скрыто от его родительского продукта. Переполнение продукта видимо. Как сделать меню полностью видимым? Позиция продукта является относительной, которая не может быть изменена .

Меню скрыто, и оно станет видимым при наведении указателя мыши.

EDIT ---------

Приведенный выше код работает. Меню не полностью видно, потому что оно обрезается следующим продуктом. Поэтому установите 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; 
}