2014-01-29 82 views
0

任何人都可以推薦一個好的工具,它可以在給定html文檔上的某些div標籤使用z-index屬性時給出我的html頁面內容堆棧的視覺效果嗎?無法切換z-index屬性

目前,我正面臨這個令人不安的錯誤,它阻止了我導航到頂部導航菜單欄上的其他菜單鏈接。

http://cms.tmadev.com.au/companyprovider.html

花費一段時間排除故障之後,我發現了頂部菜單導航欄爲「禁用」的原因是由於形象標誌。

<div class="logo"> 
    <img src="images/CRSlogo.png" alt=""> 
</div> 

如果你看看HTML文件緊密,如果去掉這個div類的標誌,頂部菜單導航欄鏈接將恢復到正常狀態。

因此,我懷疑是因爲它的默認z-index值(不管它是什麼),它導致圖像在頂層菜單導航欄的前面。

我嘗試黑客入侵CSS,將其z-index遠遠推回爲-9999 - 但它不起作用!鏈接仍然被禁用。

任何想法我應該如何正確處理z-index屬性?

乾杯!

回答

0

這樣的做法,儘量避免給予明確的高度元素

繼承人的修復

HTML

<div class="header"> 
    .. some other content ... 
</div> 

CSS關於上述溢出隱藏

.header { 
    /*height:100px --avoiding height */ 
    overflow:hidden; /* one way to force element containing floated elements to have a height */ 
} 

細節浮動把戲here

雖然上面應該工作,如果你的導航有一定的下拉列表中,有機會,它會被砍傷,因爲父設置爲「隱藏」

的好辦法overflow屬性的關閉以清除浮動將使用一種叫做 「clearfix」 詳細herethereeverywhere

所以,

HTML

<div class="header clearfix"> <!-- notice the new clearfix class --> 
    .. some other content ... 
</div> 

CSS

.header { 
    /*height:100px --avoiding height */ 
    /* overflow:hidden; --not required */ 
} 

.clearfix:before, 
.clearfix:after { 
    content:""; 
    display:table; 
    clear:both; 
} 
.clearfix { 
    *zoom:1; /* for ie7 */ 
} 
0

當我看着哪個按鈕按下的例子:「Administrator」,我得到了格「middle」,因此有必要提供更強的價值,你的「menu_tab" z-index: 2」和你的「middle z-index: 1」低;

http://fr.html.net/tutorials/css/figure020.gif

特使!

+0

我試過了。這沒有用!頂部菜單導航欄仍然被禁用! – awongCM

0

所以FireFox在其Web檢查的3D視圖,這裏的谷歌主頁的3D視圖: Google in 3D

啓用:

  1. 訪問你的網站
  2. 打開開發工具(查看>工具欄> Web開發工具欄)
  3. 選擇「Inspector」選項卡並在同一選項卡欄右側第三個選擇3D框。
0
.header {height: 140px;} without z-index system 

Varinder說真的!