如何讓html元素在顯示時與另一個元素重疊？

Question

#nav ul ul li { 
    display: block; 
    font-color: blue; 
    font-size: 1.5em; 
    z-index: 1; 
    position: relative; 
} 

例如，我有一個移動的迴應式網站，並在主菜單工作正常，但是當我調整瀏覽器窗口小，複製一個小屏幕，如移動電話....一個具有下拉列表的主菜單項顯示在其他主菜單項的頂部。這意味着主菜單下拉項目顯示在正下方的一些主菜單文本的頂部！

我已經完成了z索引，所以下拉菜單位於頂部，但問題是，即使它位於頂部，仍然顯示下面的主菜單。

這是jsfiddle

Answer 1

當你不設置z-index，元素遵循其頂部被顯示的默認排序：

當沒有元素具有的z-index，元素按照此順序堆疊（從下到上）：

1. 根元素的背景和邊框
個
2. 在正常流動後裔塊，在外觀上（在HTML）
3. 後代定位元素，的順序在外觀（在HTML）

MDN

在HTML的順序子菜單的ul出現在其他菜單項的HTML之前，因此其他菜單項出現在子菜單的背景上。

爲了解決這個問題，設置一個z-index使得ul的背景將被提升：

#nav ul ul { 
    z-index: 1; 
} 

Fixed JSFiddle