jQuery onHover показывает Div, выпуск z-index

Question

Мою проблему можно увидеть здесь: http://jasonnarciso.com/dev/cmwd/concrete-solutions/

По сути, у меня есть очень простой скрипт jquery, который показывает div при наведении элемента .item. Работает нормально, но в левом и нижнем контейнерах div обрезается.

Очевидно, что это проблема z-index, но мне интересно, должен ли я устанавливать z-index с помощью jquery? Или есть другой способ заставить его наивысший индекс? Я попытался поиграть с разными значениями на контейнерах, и, похоже, ничего не работает.

Любая помощь очень ценится.

Answer 1

Хорошо, теперь я вижу проблему.Я думаю, что есть две проблемы, проблема кодирования и проблема дизайна.Начнем с дизайна.Контейнер # product-boxes имеет ширину, и вы не должны показывать то, что находится за пределами этой ширины.Это правда, что если вы удалите скрытое переполнение, вы решите проблему с клипами правильных блоков, но это не идеально, потому что эффект наведения приведет к горизонтальной полосе прокрутки.Что касается нижних блоков, они всегда будут обрезаны, даже без скрытого переполнения, просто потому, что у контейнера недостаточно высоты, чтобы отобразить поле для зависания.Даже в этом случае без скрытого переполнения вы вызовете вертикальную полосу прокрутки.Что касается кодирования, вы должны удалить clearfix таким образом, просто сделайте это после того, как ваши плавающие элементы:

<br class="clear" />

и в вашем CSS:

.clear {display: block; clear: both; height: 0px;}

Затем, чтобы решитьВнизу вы должны изменить # product-bozes css на:

#product-boxes {
    /* REMOVED overflow: hidden; */
    padding: 35px 0px 200px 52px;
}

Дополнительный отступ даст контейнеру достаточно места для отображения наложений.Я проверил его в Firebug, и он работает нормально.

Answer 2

Со ссылкой на ответ по мю слишком коротко , если overflow:hidden невозможно, я предлагаю вам изменить положение этой стрелки и поместить ее немного выше.

Answer 3

У вас есть это в вашем CSS:

#product-boxes {
    overflow: hidden;
}

Поэтому, когда ребенку, такому как ваше меню, нужно визуализировать себя вне коробок с продуктами, он обрезается. У вас проблема overflow, а не z-index. Я не вижу необходимости в overflow: hidden; на этой странице, вы должны использовать его только тогда, когда вам нужно обрезать содержимое.