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 ?

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)