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>

当鼠标悬停在 this is 列表上时使用此 CSS，然后将其包装。
但我希望鼠标悬停在 This is LIST然后在 <p> 上显示列表文本。这是 jsfiddle这怎么可能。

Answer 1

Z-index 仅适用于位置为“相对”、“固定”或“绝对”的元素，而不适用于“静态”(这是默认设置)。