Устранение неисправностей в CSS

Question

Я пытаюсь сложить некоторые элементы, используя z-index, и он вообще не работает.

Вот 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 Tabs.

Answer 1

Вы должны использовать:

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 
} 

г-индекс не вступит в силу, если элемент не имеет позиции абсолютного или относительного IIRC. Вам также необходимо установить ширину на выбранном li - фоновое изображение не будет «убежать» даже с overflow: visible; (который вы теперь можете удалить).

Это работало для меня в FireBug - надеюсь, он будет работать, когда вы поместите его в код.