ipad에서 z- 색인이 잘 작동하지 않습니다.

Question

전체 화면 갤러리에 친구 (http://pasionesargentas.com/sm/)의 사이트를 썸네일 화면 (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/)으로 구축하고 있습니다. 뒤집기에 대한 아이디어가 마음에 들지 않았으므로 간단히 비활성화하고 대신 메뉴를 추가하는 것을 선호했습니다. 메뉴 div CSS는 다음과 유사합니다.

#top { 
position:fixed; 
background: transparent; 
display: block; 
z-index: 99999; 
} 

Chrome, Safari, Explorer 및 Opera에서 잘 작동합니다. 그러나 어떤 이유로 그녀는 그녀의 iPad에서 메뉴를 볼 수 없습니다. 나는 ipad가 없기 때문에 Ripple Mission Control을 다운로드 했으므로 제대로 작동하므로 무슨 일이 일어나는지 전혀 모른다.

이제 질문 : "태블릿 브라우저 (iPad)에 대해 CSS를 다르게해야합니까? 아니면 메뉴를 망쳐 놓고 덮는 갤러리입니까?

Answer 1

.description { 
position: fixed; 
top: 5px; 
left: 50px; 
text-shadow: 1px 1px 1px black; 
z-index: 5; 
} 
#nav:hover { 
background: #829FB0; 
opacity: 1.0; 
filter: alpha(opacity=100); 
z-index: 10; 
} 
#nav { 
align: center; 
background: #829FB0; 
padding: 3px 7px; 
display: inline; 
opacity: 1.0; //change this later 
filter: alpha(opacity=65); 
-moz-border-radius: 9px; 
border-radius: 9px; 
z-index: 10; 
} 

문제는 그래서 첫째, 투명 위에있는 div를 수 div의/높은 배치 할 노드는 Z-인덱스를 사용, 투명하지 않은 다음 참조 코드와 코드를 대체 할 수있는 나는 너무 높은 값을 필요로하지 않는다.

CSS에서 오류를 검사 할 때 노드가 보이도록하고 불투명도를 제거하고 절대로 너무 높은 값을주지 않도록한다. 시도해보십시오. 작동하지 않으면 자세히 볼 것입니다.

Answer 2

같은 문제가있는 경우 다른 div 상단에 오버레이 된 div와 투명한 png를 사용하고 싶습니다. 그 z-index은 position 속성이 absolute, fixed 또는 relative로 명시 적으로 설정된 요소에서만 작동한다는 것을 알았습니다. 내 ipad z-index 문제를 즉시 해결했습니다.

.topbar { 
    display:block; 
    background: transparent; 
    height: 60px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:6; 
    position:relative; 
} 
.middlebar { 
    display:block; 
    background: transparent; 
    height: 60px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:5; 
    position:relative; 
} 
.bottom { 
    display:block; 
    background: transparent; 
    height: 758px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:4; 
    position:relative; 
}