CSS的下拉列表被擋住,修改Z INDEX也不成功

2021-07-01 22:14:34 字數 1003 閱讀 4052

做了乙個滑鼠放上去就出現的下拉列表,但是這個下拉的內容被擋住了。

z-index是設定不同塊的層次的,我修改了問題還是有。

後來發現是 當元素的position屬性沒有的時候,z-index是失效的。

下面更詳細的解釋來自

1.第一種情況(z-index無論設定多高都不起作用情況): 

這種情況發生的條件有三個: 

1、父標籤 position屬性為relative; 

2、問題標籤無position屬性(不包括static); 

3、問題標籤含有浮動(float)屬性。 

eg:z-index層級不起作用,浮動會讓z-index失效 

複製**

**如下:

解決辦法有三個(任一即可): 

1、position:relative改為position:absolute; 

2、浮動元素新增position屬性(如relative,absolute等); 

3、去除浮動。 

2.第二種情況

ie6下,層級的表現有時候不是看子標籤的z-index多高,而要看整個dom tree(節點樹)的第乙個relative屬性的父標籤的層級。 

eg:ie7與ie6有著同樣的bug,原因很簡單,雖然所在div當前的老爸層級很高(1000),但是由於老爸的老爸不頂用,可憐了9999如此強勢的孩子沒有出頭之日啊! 

複製**

**如下:

解決辦法: 在第乙個relative屬性加上乙個更高的層級(z-index:1) 

複製**

**如下:

CSS導航下拉列表被JS幻燈片擋住的

但經常會發現。幻燈片會擋住下拉列表或者飄浮廣告等。解決辦法有下 第一,可將幻燈片所在div 置於最底層。新增css如下 style z index 100 position relative 第二,可將被擋住的div ul li 置於最高層。新增css如下 style z index 9999 po...

CSS的下拉列表

在css裝飾html的網頁過程中,即使是最基礎的網頁,下拉列表也是必要的網頁元件。接下來讓我們看一下下拉列表的分析 html 部分 我們可以使用任何的 html 元素來開啟下拉列表,如 或 a 元素。使用容器元素 如 來建立下拉列表的內容,並放在任何你想放的位置上。使用 元素來包裹這些元素,並使用 ...

用CSS做的下拉列表

檔案 f 新建 n 開啟 o ctrl o 使用 記事本 編輯 d 儲存 s ctrl s 另存為 a 頁面設定 u 列印 p ctrl p 列印預覽 v 傳送 e 匯入和匯出 i 屬性 r 關閉 c 編輯 e 剪下ctrl x 複製ctrl c 貼上ctrl v 全選 a ctrl a 查詢 在當...