谷歌瀏覽器和Z-Index bug

我一直在玩一個響應式網站，當所有的菜單和標誌在Coda運行良好時，滑入很好的位置，我嘗試在Chrome瀏覽器的網站，並且該標誌似乎隱藏在標題後面 - 感激地收到了任何幫助！谷歌瀏覽器和Z-Index bug

HTML

<div id="menu"> 
    <div class="menu"> 
     <ul> 
     <li><a href="#">Prices</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li class="contact"><span>&#9990;</span><a href="#"> 0783 448 5449</a></li> 
     </ul> 
    </div> 
</div> 
<div class="container"> 
<div class="sixteen columns"> 
    <div id="track"> 
     <div class="logo"><img src="images/logo-120.png"></div> 
    </div> 
</div>

CSS：

#menu { 
    position: fixed; 
    top: 50px; 
    height: 50px; 
    background-color: rgba(255,255,255,0.9); 
    width: 100%; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    -moz-box-shadow: 0 0 5px #888; 
    -webkit-box-shadow: 0 0 5px#888; 
    box-shadow: 0 0 5px #888; 
    text-align: center; 
    z-index: 3000; 
} 

.menu ul li { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 12px; 
    text-align: center; 
    vertical-align: middle; 
    padding: 2px 4px 2px 4px; 
    background-color: #fff; 
    font-size: 130%; 
} 

#track { 
    position: fixed; 
    top: 1px; 
} 

.logo { 
    position: relative; 
    height: 120px; 
    width: 153; 
    top: 20px; 
    left: 0px; 
    z-index: 3500; 
}

來源

2013-10-16 user2886895

不確定你的'header'是什麼，但是'z-index'不允許你在'＃menu'上放置'#track'，如果這是你的意圖。他們不是兄弟姐妹 - 「z-index」不是所有元素的全球風格，它具有特定的適用性。 –

的position: fixed頭需要具有0（或負）的標誌出現在其上方的z索引。儘管如此，我認爲您可能會錯過某些樣式來根據您提供的內容來查看此問題。

http://jsfiddle.net/ExplosionPIlls/MaDe2/1/

來源

2013-10-16 17:45:14

不知道這應該叫每本身一個「錯誤」 ....這只是瀏覽器處理父/子元素和z-index性能之間的關係的方式。

問題是#menu是.container元素的兄弟，而不是.logo。不要緊，你把多高的.logo的z-index它不會在#menu的前面去，因爲.logo的父（.container）將永遠是落後於#menu ....

.container有沒有position或z-index

如果這沒有意義，我明白。你可以從這個jsFiddle http://jsfiddle.net/EpgxK/1/得到一個更好的主意，並檢查這個以及http://css-tricks.com/almanac/properties/z/z-index/。

哦，如果你想讓菜單出現在較小屏幕尺寸的標誌前，你可能需要重新編碼你的html。

來源

2013-10-16 18:06:40 80PoundsOfFury

我有同樣的問題，我只是給position:static而不是position:relative解決。

在你的情況只是改變這個類。

` 
.logo { 
    position: static; 
    height: 120px; 
    width: 153; 
    top: 20px; 
    left: 0px; 
    z-index: 3500; 
}`

來源

2016-06-22 08:23:49

谷歌瀏覽器和Z-Index bug

回答

相關問題