Question

我有一个：

<div id="header">
    <ul id="menu-li">
        <li class="menu-li with-sublist">
            <a class="left" href="#">A</a>
            <ul class="submenu-list">
                <li><a href="#">A1</a></li>
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
            </ul>    
        </li>
        <li class="menu-li"><a class="middle" href="#">B</a></li>
        <li class="menu-li"><a class="middle" href="#">C</a></li>
        <li class="menu-li"><a class="right" href="#">D</a></li>
        <li class="clear"><!-- --></li>
    </ul>
</div>

<div id="main-content">
<!-- jquery cycle and more stuff here -->
</div>

.menu-li是水平列表，li元素是float:left。所以.submenu-list垂直填充并重叠在包含jquery循环滑动显示的#main-content div上。问题是.submenu-list后面出现#main-content - 显然我希望它显示在它上面。

我尝试了很多z-index次实验，但没有运气。我倾向于怀疑别的东西是错的。

有任何想法吗？

Answer 1

在这种情况下，z-index将无效，因为ul.submenu-list元素与标题元素高度相关。您必须使用position绝对值，然后根据top位置动态设置元素的left和li属性。

Answer 2

如果你想使用z-index，请不要忘记将position包括在绝对或相对中（并且你不能直接在该元素中使用float，但你可以放另一个元素顶部的元素，例如：http://jsfiddle.net/toopay/xLk8a/）

无法修复的重叠

2 个答案: