image par-dessus un div

Général
1

Bonjour

Comme l'indique le sujet, je voudrais mettre une image par-dessus un bloc
J'ai donc fait ceci :

    <div style="z-index:100; margin: 0 0 -20px 115px; ">
    <img src="#CHEMIN{IMG/charte_generale/plume.gif}" >
    </div>
        <div class="login">
          <h3>#NOM_SITE_SPIP<br />
          <h4><:login_acces_prive:></h4>
        </h3>
        #LOGIN_PRIVE
        </div>
</div>

Tout s'affiche correctement sauf ma plume qui reste sous le div "login" malgré le z-index:100;

Où c'est-y que je merdoie ?

Une URL pour constater
http://www2.ac-lyon.fr/etab/colleges/col-42/jromains/spip.php?page=login&url=ecrire%2F

2

Jean-Christophe Villeneuve a écrit :

Tout s'affiche correctement sauf ma plume qui reste sous le div "login" malgré le z-index:100;
  
la propriété z-index ne s'applique qu'à une balise dont la valeur de la feuille de style position est égale à relative ou absolute...

Eric

3

Bonsoir,
Il me semble qu'il faille procéder autrement.
Dans une feuille de style css, créer un id #toto
position : absolute;
top: x
left:y
width:z
height:a

puis appeler comme ceci :
<img src="....." id="toto">
<div id="toto">
    ce que tu veux
</div>

L'image remplira automatiquement ta div et sera dimensionnée exactement.
C'est en live mais j'utilise cela dans un de mes sites

Jean-Christophe Villeneuve a écrit :

Bonjour

Comme l'indique le sujet, je voudrais mettre une image par-dessus un bloc
J'ai donc fait ceci :

    <div style="z-index:100; margin: 0 0 -20px 115px; ">
    <img src="#CHEMIN{IMG/charte_generale/plume.gif}" >
    </div>
        <div class="login">
          <h3>#NOM_SITE_SPIP<br />
          <h4><:login_acces_prive:></h4>
        </h3>
        #LOGIN_PRIVE
        </div>
</div>

Tout s'affiche correctement sauf ma plume qui reste sous le div "login" malgré le z-index:100;

Où c'est-y que je merdoie ?

Une URL pour constater
http://www2.ac-lyon.fr/etab/colleges/col-42/jromains/spip.php?page=login&url=ecrire%2F

4

Jean-Christophe Villeneuve a écrit :

Bonjour

Comme l'indique le sujet, je voudrais mettre une image par-dessus un bloc
J'ai donc fait ceci :

    <div style="z-index:100; margin: 0 0 -20px 115px; ">
    <img src="#CHEMIN{IMG/charte_generale/plume.gif}" >
    </div>
        <div class="login">
          <h3>#NOM_SITE_SPIP<br />
          <h4><:login_acces_prive:></h4>
        </h3>
        #LOGIN_PRIVE
        </div>
</div>

Tout s'affiche correctement sauf ma plume qui reste sous le div "login" malgré le z-index:100;

Où c'est-y que je merdoie ?

Merci pour tous vos conseils
en externalisant les css dans la feuille de style et en rajoutant position: relative ça fonctionne.