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

这在FireBug中对我有用 - 希望当你把它放在代码中时它会起作用。

麻烦在CSS中分层

1 个答案: