définir l'indice z pour l'affichage de la liste par-dessus le texte <p>.

Question

Je veux établir une liste z-index .
Lorsque la souris passe sur la liste, celle-ci s'affiche.
et la liste ci-dessus <p> texte
Voici un simple code html et 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>

Avec ce CSS, lorsque la souris passe sur la liste, celle-ci est enveloppée.
mais je veux que lorsque la souris passe sur This is LIST puis afficher leur liste sur le site <p> texte. Voici jsfiddle comment c'est possible.

Answer 1

L'indice Z ne s'applique qu'aux éléments dont la position est "relative", "fixe" ou "absolue", et non "statique" (qui est la valeur par défaut).

Answer 2

Il semble que vous souhaitiez "préserver" l'emplacement des éléments de la liste, même lorsqu'ils sont cachés.

À cette fin, utilisez visibility au lieu de l'attribut display :

ul li {
    visibility: hidden;
}

ul:hover li {
    visibility: visible;
}

Mise à jour du violon .