Superposition avec margin négative dans Bootstrap 4.6

Bonjour,
je suis en train de travailler sur un site en Bootstrap 4.6 et j'ai besoin de faire se chevaucher des éléments. Parfois c'est une image PNG avec de la transparence dans une colonne qui viendrait "mordre" sur la colonne suivante :

<div class="row pb-5">
				<div class="col-lg-3 mr-n4"> <img src="images/gant_de_boxe.png" class="img-fluid" alt=""> </div>
				<div class="col-lg-9 py-4 content bg-white">
					<p class="pl-5 pb-3"> <strong>Nous avons obtenu en 2015 le LABEL QUALITÉ ECOCERT Il témoigne de notre efficacité et de notre savoir-faire sur 7 piliers fondamentaux :</strong> </p>
					<ul class="pl-5 ml-3">
						<li>La relation et la satisfaction client</li>
						<li>Les process opérationnels</li>
						<li>La prise en compte des enjeux de sécurité</li>
						<li>Les relations prestataires et achats</li>
						<li>La transparence budgétaire</li>
						<li>Le management en interne</li>
						<li>L'application d'une démarche RSE et développement durable</li>
					</ul>
				</div>
			</div>

parfois c'est une image dans une colonne qui vient "mordre" la ligne au dessus, sur le même principe.

Dans les 2 cas, j'ai bien un décalage qui se crée avec "mr-n4" ou "mt-n5" MAIS (et c'est là l'objet de ma demande) si la zone qui est sensé être mordue contient une couleur de fond (comme dans mon exemple ci dessus : "bg-white") alors l'image passe SOUS la couleur de fond... ce qui ne donne donc pas l'effet escompté de "mordage"... mais il manque un morceau de l'image qui est donc recouverte

ou


Ma question : Comment puis je jouer sur le z-index de cette image, alors que je suis dans la grille Bootstrap et sans sortir du flux ? Ou quelle serait la solution à mon problème selon vous ?

merci de votre aide
Modifié par jp.bond (07 Apr 2021 - 11:20)

bonjour, personne pour m'aider ?

Salut,

Toujours bloqué ? Il doit nous manquer des éléments... comment tu fais "déborder" ton image ?

Ton site est en ligne ?

Bonjour, oui toujours bloqué...
Dans Bootstrap, on utilise le style mr-n4 par exemple pour faire déborder l'image. En fait c'est une marge négative qui vient décaler le contenu d'une cellule vers la droite mr (margin right) n4 (negative et on peut mettre 1, 2 , 3, 4, 5 pour accentuer le décalage)
Oui mon site est en ligne ici : http://www.y-e-p.com/2021/
On voit bien le problème avec la photo en bas de page du gars avec la tête de fleur et sa marge mt-n5. L'image passe sous le fond du bloc précédent, ce qui fait que l'effet de débordement n'a pas lieu...

Ah !
C'est le

section {
    overflow: hidden;
}

sur la section qui te bloque ici

Et sinon pour le gant si tu rajoutes un z-index:1; sur ta .col-lg-3.mr-n4 (celle qui englobe l'image) ca devrait le faire.
Modifié par _laurent (14 Apr 2021 - 15:14)