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?

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.

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.

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.

une exemple avec une position [b]relative[/b] 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

@+

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.

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 ?

@+

<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>

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;
}

Bonjour à tous,

J'ai la liste html suivante:

[html]<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>[/html]

Avec le css suivant, pour afficher des carrés inline collés les uns aux autres:
[css]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;
}[/css]

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.