Выпуск z-индекса в ie7 с фиксированным элементом заголовка и прозрачностью

Question

Я смоделировал страницу, используя 960.gs, в котором есть несколько элементов, зафиксированных в элементе div, в котором должно передаваться содержимое страницы.Фон этого div является CSS-градиентом и имеет высоту 100% (если градиент применяется к реальному телу страницы, он фактически не расширяет всю ширину страницы).Когда пользователь прокручивает вверх, контент должен быть доступен для просмотра за непрозрачным меню.

http://resume.jamesfishwick.com/

Макет работает так, как я хочу в FF и Chrome, но содержимое страницы прокручивается в фиксированной верхней области в IE7.

Я понимаю, что создается новый контекст стека, но я не смог решить эту проблему, поигравшись с z-индексом рассматриваемых элементов или их родителей.Я знаю, что могу объединить некоторые дополнительные элементы div, используемые сеткой, но я не смог сделать это таким образом, чтобы сохранить эффекты градиента и прозрачности.

Как мне добиться этого в IE7?

Answer 1

В IE7 элемент захвачен своим позиционированным родителем и не может выйти. Нельзя переплетать дочерние элементы позиционированных родителей, потому что ie7 и 6 неправильно применяют нулевой z-индекс к позиционированным элементам, когда им следовало применить auto.

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

Так что мне нужно изменить дизайн и применить градиент к другому элементу, а не к фиксированному элементу со 100% -ной высотой. Это позволит отделить заголовок от содержимого, а затем содержимое может перейти под заголовок.

Answer 2

Вам нужно дать этому прокручивающему div z-индекс, который меньше, чем z-index в главном заголовке. Чтобы контролировать прозрачность для msie 7, просто добавьте следующий код CSS в конец документа, скажем прямо перед тегом .

/* ie6 hack */
* html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }
/* ie7 hack */
*+ html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }