css - 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 - 网站正在 build 中。有问题的部分是旋转选项卡。使用 jQuery UI 选项卡插件。

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，否则 z-index 不会生效。 您还需要在选定的 li 上设置宽度 - 即使使用 overflow:visible; (您现在可以删除)，背景图像也不会“逃逸”。

这在 FireBug 中对我有用 - 希望当你将它放入代码中时它也能工作。