html - 为显示列表设置 z-index文本

Question

我想设置列表z-index。
当鼠标悬停在列表显示时。
这个列表显示上面的<p>文本
是简单的 html 和 css

<style>
ul li{
    display:none;
}
ul:hover li{
    display:block;
    z-index:-1;
}
</style>

<ul><h3>This is LIST</h3>
<li>back</li>
<li>forword</li>
<li>click</li>
</ul>
<p>list show above this text.</p>

当鼠标悬停在此列表上时，使用此 CSS 将其包装。
但我想当鼠标悬停在文本上时This is LIST显示列表。<p>这是jsfiddle 它是如何可能的。

Answer 1

Z-index 仅适用于具有“相对”、“固定”或“绝对”位置的元素，而不适用于“静态”（这是默认值）。

Answer 2

听起来您想要的是“保留”列表项的位置，即使它们被隐藏。

为此，请使用visibilityCSS 属性而不是display：

ul li {
    visibility: hidden;
}

ul:hover li {
    visibility: visible;
}

更新了小提琴。