[RESOLU] Superposition de deux images dans le flux

21 janv. 2021, 13:12

Bonjour, j'ai deux images :

Img1 : image en jpg
Img2 : image en png

je veux superposer Img2 au-dessus de Img1.

J'utilise un bout de code trouvé sur un site

d'abord un css

Code : Tout sélectionner

.container
    .img1{
      position: absolute;
        z-index: 10;       
    }
    .img2{
   position: absolute;
        z-index: 20;
    }

puis à l'endroit où je veux que cela se fasse dans le <body>

Code : Tout sélectionner

echo '<div class="container" >
            <img src="'.$requete130.'" alt="'.$requete2.' '.$requete3.'" class="img1"  />
            <img src="'.$requete259.'" alt="'.$requete2.' '.$requete3.'" class="img2"  />   
        </div>';

ça marche bien pour la superposition

mais mon souci (à cause du absolute sans doute) est que cela se superpose au texte de la page qui précède la photo , ou qui suit.

Comment faire en sorte que la première image (img1) se mette bien dans le flux et que img2 (qui a exactement la même taille que img1) vienne se mettre sur img1 ?

Je pense que je suis pas bien loin, mais c'est la première fois que j'essaye de faire ça. Peut-être existe-t-il d'autres moyens de le faire simplement en php. Attention, je suis pas un cador de la programmation.

Merci de votre aide

21 janv. 2021, 13:17

Je suis en train de tilter que mon problème n'a rien à voir avec du php.... Désolé, mais si quelqu'un peut m'aiguiller, je suis preneur de conseil. Merci

21 janv. 2021, 14:27

Pas de souci, je déplace ton post dans la section HTML/CSS

Alors c'est tout simple, il faut que ton image de fond ne soit pas en position:absolute; mais en position:relative;
Ainsi le texte (ou tout autre élément) ne va pas se glisser dessous.

Et tu as juste à mettre l'élément que tu veux superposer en position:absolute; car c'est lui que tu veux décoller de la mise en page.

<p>Texte avant</p>
<div class="container" >
  <img src="https://forum.phpfrance.com/styles/PHPfrance/theme/phpfrance-logo.png" class="dessus" />
  <img src="https://tafttest.com/400x200.png" class="dessous" />
</div>
<p>Texte après !</p>

<style>
.dessus{
  position: absolute;
  z-index: 20;
  top: 130px;
  left: 50px;
  width: 180px;
}
.dessous{
  position: relative;
  z-index: 10;
}</style>

Démo : https://jsfiddle.net/187xa2pn/

21 janv. 2021, 15:05

Super. Merci. Du coup en voyant le résultat, cela m'a donné une idée d'amélioration de la convivialité de la page.

A une prochaine

[RESOLU] Superposition de deux images dans le flux

Qui est en ligne