Использование свойства CSS z-index на "фиксированных" позиционированных элементах вызывает у меня странное поведение в Chrome.
Когда браузер Firefox и Opera дают мне ожидаемый результат, Chrome, похоже, не уважает свойство z-index, отображая полосу прокрутки над красным наложением (см. код и Fiddle ниже).
HTML:
<div class="left">
<div class="placeholder"></div>
</div>
<div class="right"></div>
<div class="overlay"></div>
CSS
.left {
background-color: yellow;
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 35%;
z-index: 10;
}
.right {
background-color: orange;
bottom: 0;
position: fixed;
right: 0;
top: 0;
width: 65%;
z-index: 20;
}
.overlay {
background-color: red;
bottom: 20%;
left: 25%;
position: fixed;
right: 25%;
top: 20%;
z-index: 40;
}
.placeholder {
height: 3000px;
}
Пример: http://jsfiddle.net/kvNFW/
ОС: Apple Mac OS 10.8 Google Chrome: версия 27.0.1453.93
Есть ли у кого-то такие же проблемы или есть способ исправить это?
Заранее благодарим за помощь.
Edit:
Смотрите обзор для обзора проблемы.