고정 헤더 요소와 투명도가있는 ie7의 z- 인덱스 문제

Question

960.gs를 사용하여 페이지의 내용을 처리 할 div에 고정 된 몇 가지 요소가있는 페이지를 조롱했습니다. 이 div의 배경은 CSS 그라디언트이며 높이가 100 %입니다 (그라디언트가 페이지의 실제 본문에 적용되는 경우 페이지의 전체 너비까지 실제로 확장되지 않습니다). 사용자가 위로 스크롤하면 내용은 불투명 한 메뉴 뒤에서 볼 수 있습니다.

http://resume.jamesfishwick.com/

레이아웃은 내가 FF와 크롬에서 원하는대로 작동하지만, IE7에서 고정 된 상단 영역 위로 페이지 스크롤의 내용.

새로운 스태킹 컨텍스트를 만들었지 만 문제의 요소 또는 해당 부모의 Z- 인덱스를 만지면 해결할 수없는 것으로 알고 있습니다. 그리드에서 사용되는 추가 div를 통합 할 수는 있지만 그래디언트 및 투명도 효과를 유지하는 방식으로는 수행 할 수 없었습니다.

어떻게 IE7에서이 모양을 얻을 수 있습니까?

Answer 1

IE7에서 요소는 해당 위치의 부모에 의해 트랩되고 이스케이프 할 수 없습니다. ie7과 6은 auto를 적용해야 할 때 위치가 지정된 요소에 Z- 인덱스 0을 잘못 적용하기 때문에 위치 지정된 부모의 자식을 섞을 수 없습니다.

해결할 수 없기 때문에 부모를 포지셔닝하는 것 외에 다른 방법으로 탈출 할 방법이 없습니다.

그래서 디자인을 변경하고 100 % 고정 요소가 아닌 다른 요소에 그라디언트를 적용해야합니다. 그러면 헤더가 내용과 별도로 나뉘며 내용이 헤더 아래로 갈 수 있습니다.

Answer 2

메인 헤더의 z- 색인보다 작은 z- 색인을 스크롤링 div에 제공해야합니다. msie 7의 투명도를 제어하려면 </body > 태그 바로 앞에 다음과 같은 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')); }