Les positions float et relative en responsive

Bonjour,

Je suis en train de monter un site sur lequel je voudrais qu'une image en chevauche une autre.
Je suis dans une grille bootstrap, j'ai 3 éléments placés correctement (dont une image en vert) et je voudrais qu'une autre image (la jaune) passe par dessus.
J'ai essayé plusieurs positionnements comme relative et float ; les deux fonctionnent en desktop (j'arrive à placer l'image où je le veux), mais dès que la taille de l'écran varie, l'image du dessus ne suit pas du tout.
J'ai fait quques recherches sur le net ; je trouve plein d'explications sur les positionnements mais pas comment ils se gèrent en responsive.

voilà ce que ça donne :

<section class="container-fluid" >
			<h1>titre</h1>
        <div class="row ">

          <div class="col-md-5 col-sm-4 col-12">
            <img src="img/histoire.jpg">
          </div>
          <div class="col-md-2 col-sm-2 col-12 ">
            <img src="img/logo.jpg" >
          </div>
          
          <div class="col-md-5 col-sm-6 col-12 paragraph ">
            <p>paragraphe 1</p>
            <p> > paragraphe 2</p>
            <p>> pragraphe 3</p>
            <p>> pragraphe 4</p>
            <p>> pragraphe 5.</p>
            <p>> pragraphe 6</p>

            <button type="button" class="btn btn-outline-dark"><a href="https://avarefuge.fr/">call to action</a></button>

          </div>

          <div class="col-md-3 dessus-2">
            <img src="img/vie-an.jpg">
          </div>


        </div>  
    </section>

et pour le css :

img {
	max-width: 100%;
	height: auto;
}

.paragraph {
	font-size: 2rem;
}
.btn {
	font-size: 1.5rem;
}
.dessus-2  {
	position: relative;
	top: -22rem;
	left: 25rem;
} 

Merci pour votre aide.

PS : c'est le premier message que je poste sur ce forum et ne sais pas si j'ai bien compris la présentation du code. Veuillez m'excuser si j'ai fait des bêtises.

Merci pour votre aide
Modifié par Felipe (12 Feb 2020 - 14:08)

Oui c'est ça. Comment faire pour que le carré jaune "reste attaché" au vert lorsque la taille de l'écran varie. Sachant qu'à partir d'une certaine taille taille d'écran définit par les medias queries, tout se mettra en 12 col?

Merci

Bonjour et bienvenue,

Note préliminaire : sur tout élément img, l'attribut alt est obligatoire ! Si c'est une image décorative ce sera <img alt="" src="(…)"> (ou alt sans le ="" à la rigueur) ; si c'est une image porteuse d'information alors la valeur du alt décrit en général le contenu de l'image (genre <img src="paiement/cb.png" alt="Carte Bleue">)
Ressource : https://disic.github.io/guide-integrateur/9-images.html

En regardant comment est construite la grille Bootstrap 4 dans la doc https://getbootstrap.com/docs/4.3/layout/grid/ je pense que tu peux tenter

.pull-1 {
  margin-left: calc(100% / 12 * -1);
}

Ça revient à -25% si tu veux faire reculer de 3 colonnes un élément .col-N

kerm007 a écrit :
Sachant qu'à partir d'une certaine taille taille d'écran

Plus exactement "jusqu'à une certaine largeur" car Bootstrap est Mobile First.
C'est de 0 à l'infini par défaut ou bien avec un suffixe -md- de 768 à l'infini, etc (BS propose au dév des MQ pour faire l'inverse "de 0 à 767.98px" par exemple mais lui-même ne les utilise pas)
Modifié par Felipe (12 Feb 2020 - 14:29)