導航下拉菜單被遮住或顯示不全問題所在和解決辦法

導航下拉菜單被遮住或顯示不全問題所在和解決辦法

導航下拉菜單被banner遮住/顯示不全,這種問題是老生常談了,經常有新手會問,有些人做了2、3年的還會經常犯錯,而且好多人還以為是js問題,其實這是基本的css知識。我覺得還是有必要寫一遍文章解釋給新手們。

一、導航下拉菜單被遮住,那是因為層疊關系錯誤

我們必須理解層疊關系滿足的2個條件:

  • 1、必須是同級;
  • 2、二者分別設定了position:relative 或 absolute 或 fixed;
  • 這時候通過設置z-index才有效

看看我們比較常見的網頁布局:

html:

<!-- 頭部 -->
<div class="header">

    <div class="nav">
        <ul class="mNav">
            這是下拉菜單
            .........
        </ul>
    </div>

</div>

<!-- banner -->
<div class="banner">
    <div class="slider">這是焦點圖....</div>
</div>

錯誤css

.header{ }
.header .nav{ z-index:9999; height:50px; color:#fff; text-align:center;  }
.banner{ position:relative; margin:10px auto; height:300px; }

上面css里吧nav的z-index設置成9999,但發現下拉還是被擋住,這是因為此時banner設置了position,會在nav上面。

想要nav在banner上面,就需要向上查找,發現nav的外層(header)和banner在同一級(滿足條件1)

這時候同時設置header和banner的position和z-index,使header在banner上面即可,此時nav的z-index已經無關重要了。

正確css:

.header{ position:relative; z-index:1 }
.header .nav{  height:50px; color:#fff; text-align:center; }
.banner{ position:relative; z-index:0; margin:10px auto; height:300px; }

例子2:

如果你的html結構這樣的:

<div class="header">

    <div class="nav">
        <ul class="mNav">
            這是下拉菜單
            .........
        </ul>
    </div>

</div>

<!-- content -->
<div class="content">
    <div class="banner">
        <div class="slider">這是焦點圖....</div>
    </div>
</div>

那么分別設置header和content的position和z-index,因為2者在最外層并且同級。

其它同理。

二、導航下拉菜單顯示不全是因為外層設置了overflow:hidden

很多時因為網頁比較復雜,層級比較多,所以經常忽略了外層或者外外外層設置了overflow:hidden導致導航下拉菜單顯示不全,其實只要仔細查找就能解決問題,把overflow:hidden去掉,如果需要清除浮動,可以用其它方法,百度css清除浮動就有了。

此條目發表在 SuperSlide常見問題 分類目錄。將固定鏈接加入收藏夾。

導航下拉菜單被遮住或顯示不全問題所在和解決辦法》有 1 條評論

  1. 這篇文章是真的需要,我之前遇到這種問題直接改z-index:1改成z-index:990 結果發現幻燈片左右兩側的按鈕失效了 不過管他呢 下拉導航沒被遮住就好了 看了此文才明白問題所在了 感謝