В контексте разработки меню у меня есть div с фиксированной позицией (вид popin, который содержит элементы меню уровня 3 и более), который содержится в div с абсолютным позиционированием (который содержит элементы уровня 2).
Иногда абсолютный div имеет полосу прокрутки, и в этом случае эта полоса прокрутки появляется над фиксированным div в Google Chrome (этого не происходит в FF и IE).
Пример упрощенного jsfiddle
.level-1 {
background: red;
height: 150px;
width: 200px;
position: absolute;
z-index: 1;
overflow-y: auto;
overflow-x: auto;
}
.level-1-content {
height: 200px;
}
.level-2 {
position: fixed;
left: 50px;
top: 50px;
width: 400px;
height: 200px;
z-index: 2;
background: blue;
}
<div class="level-1">
<div class="level-1-content"></div>
<div class="level-2"></div>
</div>
Эта проблема возникает, только когда фиксированный и / или абсолютный div имеют z-индекс.
В простом примере jsfiddle z-index не требуется, но в контексте моего меню они мне нужны.
Кто-нибудь знает решение CSS, чтобы Chrome не отображал эту полосу прокрутки над дочерним div в этом контексте (я имею в виду, с моими ограничениями, то есть родительский div является абсолютным и имеет z-индекс, а дочерний div - это исправлено)?
Заранее спасибо.