css overlay dans une liste

Eléphant du PHP | 101 Messages

15 sept. 2016, 14:11

Bonjour à tous,

J'ai la liste html suivante:
<ul>
<li>item 1<div class="overlay"></div></li>
<li>item 2<div class="overlay"></div></li>
<li>item 3<div class="overlay"></div></li>
</ul>
Avec le css suivant, pour afficher des carrés inline collés les uns aux autres:
li {
width: 100px
height: 100px;
float: left;
}

/* overlay invisible et plus grand que les carrés, s'affiche uniquement on mouse over */
.overlay {
display: none
width: 200px;
height: 200px;
}
Mon problème, c'est le div.overlay.
Lorsqu'il apparaît on mouseover, je souhaiterais qu'il apparaisse au dessus de tous les autres carrés de la liste.

Actuellement, le div.overlay s'affiche bien au dessus de item 1. C'est normal car le li N°2 est placé après le li N°1 dans le html.

Par contre et c'est logique également, l'overlay de ce li N°2 s'affiche en dessous du li N°3.
Y a-t-il une solution pour afficher l'overlay du li N°2 au dessus du li N°3 et pas en dessous?

En vous remerciant pour vos réponses.

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

15 sept. 2016, 14:37

salut,

actuellement si tu affiche le "overlay" de l'item deux ça "agrandis" le li mais ça ne le sort pas du flux courant.
position relative au parent + z-index ?

c'est quoi le code css pour le on mousse over ?

@+
Il en faut peu pour être heureux ......

Eléphant du PHP | 101 Messages

15 sept. 2016, 14:50

Salut moogli, le code mouse over est en javascript et est un simple $('.overlay').show().
J'ai essayé le li parent en position relative + overlay en position absolute + z-index plus élevé sur le overlay avant même de poster le sujet. Malheureusement ça ne fonctionne pas.

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

15 sept. 2016, 15:33

une exemple avec une position relative de l'overlay (relative au parent donc)
https://jsfiddle.net/o0ct37kL/

j'ai ajouté un peu de couleur pour que l'on vois bien l'emplacement des boites XD

@+
Il en faut peu pour être heureux ......

Eléphant du PHP | 101 Messages

15 sept. 2016, 15:49

Merci pour cet exemple.
Sauf d'interprétation de ma part: dans ton exemple, overlaid 3 cache une partie de overlaid 2.
Ce que je cherche à faire c'est justement l'inverse: que overlaid 2 cache une partie de overlaid 3.

Eléphant du PHP | 101 Messages

15 sept. 2016, 16:15

bon, une solution pur CSS serait géniale au sens strict du terme mais pour l'instant je contourne le pb en utilisant javascript pour manipuler les z-index.
on mouseover, je peux donc mettre tous les z-index de la liste à 0, puis mettre une valeur > 0 pour l'élément en cours de survol.
Merci beaucoup, je n'aurais pas pensé à cela sans ta contribution.

Eléphant du PHP | 101 Messages

15 sept. 2016, 16:17

pour la gloire, ne pas hésiter si quelqu'un a une idée de comment faire cela en pur CSS.
par exemple, serait-il possible de mettre à jour des z-index avec css3 transitions? à méditer je suppose.

Eléphant du PHP | 101 Messages

15 sept. 2016, 16:20

la réponse ici: http://zomigi.com/blog/css3-transitions-and-z-index/
en gros c'est possible, avec quelques petites contraintes mais oui quand même.
d'autres suggestions?