如何在该列表项之外的列表项中显示内部内容而不被降序列表项覆盖答案

【问题标题】：How to show inner content in list item outside of that list item without being covered up by descending list items如何在该列表项之外的列表项中显示内部内容而不被降序列表项覆盖
【发布时间】：2013-09-06 18:00:18
【问题描述】：

我有一个带有列表项的网格，您可以单击以切换内部内容以显示自身 - http://jsfiddle.net/TimmyTodd/SUf5y/1/

每个列表项都有一个可见的溢出，但内部内容会被后面的任何列表项覆盖（即使内部内容的 z-index 设置在“li”的顶部）。

有什么方法可以让内部内容出现在所有列表项的顶部？

这是我的 CSS：

li {
    width: 40px;
    height: 40px;
    display: block;
    float: left;

    position: relative;
    z-index: 1;

    overflow: visible;
}
.innerContentToShow {
    width: 40px;
    height: 40px;

    position: absolute;
    z-index: 2;

    top: -10px;
    left: -10px;

    border: 10px solid #ccc;
    background-color: transparent;
}
.innerContentToShow p {
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    padding: 5px;
    margin-top: 28px;
}

还有我的一些 HTML 列表代码：

<ul>
    <li>
    <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
    <li>
    <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
    <li>
        <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
</ul>

【问题讨论】：

你有没有试过改变被点击的'li'本身的z-index？
太棒了。工作。非常感谢！

标签： javascript jquery html css list

【解决方案1】：

您必须将点击的 'li' 的 z-index 设置得更高，作为回报，之前点击的 'li' 会返回。

示例如下：fiddle

这里是脚本：

var oldli;
$('li').click(
    function(){
        $(oldli).toggleClass('displayNone displayBlock');
        $(oldli).css("z-index","1");
        $(this).toggleClass('displayBlock displayNone');
        $(this).css("z-index","5");
        oldli=$(this);
    }
);

【讨论】：