CSS z-index кажется не отвечающим

Question

Я работаю над страницей, где я пытаюсь создать иллюзию цветной полосы, обертывающейся вокруг и позади холста.

Для этого я экспортировал мою графику в виде двух изображений - одно, которое должно быть расположено позади холста, и одно, которое должно быть расположено спереди.

Для холста (.footer-container в ссылке ниже) я установил положение: относительный и z-индекс 2, для «заднего» слоя я установил положение: абсолютный и z-индекс 1 и для «передний» слой я сделал то же самое, но с z-индексом 3.

Но независимо от того, что я делаю, я не могу заставить свои картины идти за холст. В настоящее время два IMG вложены в div холста, но я также попробовал ту же процедуру, где они, где нет. Кроме того, я сделал подобное в другом месте на той же странице, и это работает - я действительно не могу понять, что я делаю неправильно?

Вот ссылка на реализацию:

http://dl.dropbox.com/u/706446/SFB%20html%20mockups/z-index-problem.html

Спасибо!

Answer 1

Сложно увидеть результат, потому что у контейнеров нет фона.

#footer-top {
  background:#fff;
  position:relative;
  z-index:3; }

#footer-back {
  background:#fff;
  position:relative;
  z-index:3; }

.footer-stripes_front {      
  position:absolute;      
  z-index:4; }

.footer-stripes_back {      
  position:absolute;      
  z-index:2; }

Answer 2

Я нашел решение:

Не устанавливайте z-index для div#footer-container.Установите z-index div.footer-stripes_back на -1.Вы можете удалить z-index div.footer-stripes_front, это не обязательно, и вы можете оставить структуру DOM такой, какая она есть.У меня работает в Chrome.