當我打開菜單菜單時，如何解決在我的網站上發生的圖像「閃爍」？

Question

我有一個移動網站，我試圖實現JQuery mmenu插件（最真棒的插件可以在這裏找到：http://mmenu.frebsite.nl/）。我遇到的問題是，當用戶打開菜單（單擊鏈接/按鈕）時，我的主背景圖像相對定位「閃爍」。它消失，然後立即回來。這種情況在桌面瀏覽器中很快發生，但在移動瀏覽器中非常明顯，並且破壞了體驗。

有問題的圖像定義如下：

<div class="bgImage" style="position:relative;top:-26px"> 
    <img src="http://path-to-image.jpg" id="imgHero" /> 
</div> 

我已經張貼在這裏的樣本的jsfiddle：http://jsfiddle.net/caveman/9xS82/20/

如果你運行的例子（尤其是在桌面瀏覽器），觀看主圖像（男子飛釣），同時點擊右上角的菜單按鈕。你可能需要嘗試幾次才能看到足夠慢的閃光（就像我之前提到過的，桌面不是很明顯，但是在移動設備上它要慢很多，看起來不太好）

我認爲這樣與IMG相對定位（位置：相對）有關。在Firebug中操作時，如果我移除位置：img上的相對位置（在我的實際網站設計中），但在打開菜單時不會「閃爍」。

有誰知道會造成這種情況和/或如何解決？

Answer 1

在您的mobile_old.css樣式表中，.bgImage的z-index被設置爲-99，因此該元素很快隱藏在主內容之後。如果您更改背後的內容的顏色，閃爍將會顯示該顏色（以證明它隱藏在內容後面）。

給它一個積極z-index解決問題：

div.bgImage 
{ 
    z-index: 1; 
} 

Fiddle