У меня проблема с отображением iframe под абсолютно позиционированными контейнерами. Эта проблема, кажется, только в Google Chrome, в то время как в IE 9, Firefox и Safari это нормально.
Пример кода
<div id="cont_1" class="containers">
mixed content with images and text.
</div>
<div id="cont_2" class="containers">
mixed content with images and text.
</div>
<div id="cont_3" class="containers">
This one holds an iframe - An youtube video.
<iframe width="450" height="259" sr c="http://www.youtube.com/embed/VuNIsY6JdUw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="cont_4" class="containers">
mixed content with images and text.
</div>
Все эти контейнеры (слайды) имеют одинаковый CSS, сгенерированный с помощью JS.
#containers {
height: 398px;
width: 456px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
margin: 0px;
position: absolute;
left: 184px; /* Successive ones have greater value. */
zIndex : 150; /* Every successive div has zIndex higher than the previous one. */
}
Каждый последующий div имеет zIndex больше, чем предыдущий. Так 150, 152, 154, 156.
Четвертый контейнер установлен так, чтобы всегда отображаться выше, чем другие элементы. Да, но не тогда, когда видео YouTube добавляется в третье. Видео всегда находится над всеми элементами, включая четвертый, который должен быть сверху.
Я попробовал следующий CSS для iFrame, как с помощью таблицы стилей, так и с помощью JS.
.containers iframe {
position : relative;
z-index : -100;
}
Но это не помогает в Chrome 14, хотя он работает во всех других современных браузерах, включая Safari.
Если кто-то захочет узнать, для чего он используется, это своего рода стеки, которые позволяют просматривать слайды с анимацией. Нажатие кнопки «Далее» возвращает самый верхний элемент назад, в то время как его края все еще видны.
Есть мысли?