Bonjour, je suis actuellement en train de développer un petit site en local pour mon plaisir personnel et j'ai un problème que je n'arrive pas à résoudre malgré plusieurs recherche à ce sujet. Mon problème est le suivant : 

J'ai une <div> qui contient des messages que je reçois, tirés de la bdd locale. J'essais de tester des petits trucs sympa en css et j'essais notamment de faire en sorte que lorsque mon pointeur de souris arrive sur la div du message (non lu), cette même div se floute et que mes trois icônes apparaissent PAR-DESSUS la div du message concerné. Sauf que pour l'instant j'ai juste voulu positionner mes icônes (et donc ne pas les cacher) et lorsque mon pointeur arrive sur la div du message, la div se floute correctement mais mes icônes qui étaient auparavant AU-DESSUS de ma div se retrouvent EN-DESSOUS. J'ai essayé de manipuler les z-index de chacune des div mais ça ne change rien.

Voici quelques Screenshots :

Ici tout est normal. Les icônes sont placés à peu près là où je le souhaites.

Mais lorsque je passe dessus (et donc :hover)

Ma div de message devient floue (comme souhaité) mais mes icônes sont passés dessous...

Je vous montre mon HTML :

 <div class="received_msg btn"><?php  foreach( $reqMessage as $data ) {
                                    echo  $data['contenu'];
                                    }  ?>
    </div>

    <div id="actions">
      <img id="jeter" src="css/img/poubelle.png">
      <img id="lire" src="css/img/lire.png">
      <img id="repondre" src="css/img/crayon.png">
    </div>

Et maintenant mon CSS : 

#actions {
    margin-top: -50px;
    z-index: 20;
    position: absolute;
    margin-left: 20px;
    padding-left: 50px;
}

.received_msg:hover {
filter: blur(5px);
 animation-name: flouAnimation;
 animation-duration: 0.5s; 
 position: relative;
 z-index: 1;
}

Comme vous pouvez voir j'ai essayé d'utiliser les 'positions' parce qu'apparemment il faut les utiliser pour utiliser les z-index.

Voilà j'espère que j'ai été clair, sinon n'hésitez pas à me poser des questions pour préciser certains points.

Merci !!

Salut,

As-tu essayé de passer ta div "action" au dessus de celle de tes messages reçus dans ton html ?

<div id="actions">
     <img id="jeter" src="css/img/poubelle.png">
     <img id="lire" src="css/img/lire.png">
     <img id="repondre" src="css/img/crayon.png">
   </div>

<div class="received_msg btn">
<?php  
   foreach( $reqMessage as $data ) {
            echo  $data['contenu'];
                                   }  
?>
   </div>

-
Edité par Offkors 16 mai 2018 à 15:59:19

Hé bien merci ça fonctionne même si je suis sûr que j'ai commencé comme ça !

Je me sens vraiment très inutile, je suis désolé de t'avoir fait perdre ne serait-ce que 2 minutes de ton temps !

Problème résolu merci beaucoup !

Le forum sert à ça au final tant que la solution fonctionne c'est ce qui importe :D.

A+