7

サムネイルフリップ付きのフルスクリーンギャラリー（http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with- ）を使用して、友人（http://pasionesargentas.com/sm/ ）のサイトを構築しています。サムネイル-フリップ/）。私はフリップのアイデアがあまり好きではなかったので、それを無効にして代わりにメニューを追加することを単に好みました。メニューdivcssは次のようなものです

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

Chrome、Safari、Explorer、Operaで正常に動作します。しかし、何らかの理由で、彼女はiPadでメニューを見ることができません。私はiPadを持っていないので、リップルミッションコントロールをダウンロードしましたが、それも正常に動作するので、何が起こっているのかわかりません。

さて、質問：タブレットブラウザ（iPad）ではcssを変える必要がありますか？それとも、メニューをめちゃくちゃにしてカバーしているのはギャラリーですか？

4

2 に答える 2

4

同じ問題があり、別のdivの上に透明なpngを含むオーバーレイdivを使用したいと考えていました。z-index位置プロパティが絶対、固定、または相対に明示的に設定されている要素でのみ機能することがわかりました。z-index私のiPadの問題を即座に修正しました。

.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; 
}
于 2013-02-19T20:47:59.387 に答える
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-indexを使用します。これも必要ありません。非常に高い値

cssでエラーをチェックするときは、ノードを表示して不透明度を削除し、zインデックスに高すぎる値を指定しないようにしてください。これを試してみてください。うまくいかない場合はよく調べます。

于 2012-08-07T12:47:50.537 に答える