Устранение неполадок в 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
}

z-index не вступит в силу, если элемент не имеет абсолютного или относительного положения iirc. Вам также нужно установить ширину для выбранного li - фоновое изображение не будет "убегать" даже с overflow: visible; (который вы теперь можете удалить).

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