在CSS中故障分層

我正在嘗試使用z-index對某些元素進行分層，但它根本不起作用。在CSS中故障分層

這裏的CSS：

ul.ui-tabs-nav {list-style:none; float:left; display:block;padding:0; margin:6px 0px 0px 0px; width:85px; } 
    ul.ui-tabs-nav li {padding:0px 7px; height:64px; background:url(/templates/gspm_home/images/tab_bak.gif) top left no-repeat;} 
    ul.ui-tabs-nav li.ui-tabs-selected {z-index:100; display:block; background:url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; overflow:visible; } 
.ui-tabs-panel { z-index:1; width:360px; height:256px; padding:0;background:#fff; float:right; margin-top:6px;}

當調用ui-tabs-selected類中，有被認爲是背景圖像的那層的ui-tabs-panel上方。但沒有任何反應。

下面是HTML標記：

<ul class="ui-tabs-nav"> 
    <li class=""> <a href="#1" class="blue"> 
    Link</a></li> 
    <li class="ui-tabs-selected"> <a href="#2" class="blue">Link</a></li> 
    <li class=""> <a href="#3" class="blue"></a></li> 
    <li class=""> <a href="#4" class="blue">Link</a></li></ul> 


       <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="1"> 
       Content 
       </div> 
       <div style="" class="leading ui-tabs-panel" id="2"> 
       Content 
       </div> 
       <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="3"> 
       Content 
         </div> 
       <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="4"> 
       Content 
       </div>

我缺少什麼？

www.gspm.org - 網站正在建設中。有問題的部分是旋轉的標籤。使用jQuery UI選項卡插件。

來源

2009-01-23 Jared

我試過了你給的HTML + CSS，它看起來沒問題 - 我想也許沒有足夠的東西來看看問題。你有它的網址嗎？ – Greg 2009-01-23 15:01:35

是 - www.GSPM.org - 網站仍在建設中。這是中間的旋轉標籤。使用jQuery UI選項卡 - 這可能會導致我想的問題。謝謝！ – Jared 2009-01-23 15:05:17

您需要使用：除非該元素具有位置的絕對或相對IIRC

ul.ui-tabs-nav 
{ 
    list-style:none; 
    padding:0; 
    margin:6px 0px 0px 0px; 
    width:85px; 
    position: absolute; 
    z-index: 100; 
} 

ul.ui-tabs-nav li.ui-tabs-selected 
{ 
    display:block; 
    background: url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; 
    width: 100px 
}

的z-index將不會生效。您還需要在選定的li上設置寬度 - 即使使用overflow: visible;（您現在可以刪除），背景圖像也不會「轉義」。

這在FireBug中適用於我 - 希望它可以在您將其放入代碼時起作用。

來源

2009-01-23 15:25:06 Greg

在CSS中故障分層

回答

相關問題