5297 sujets

Sémantique web et HTML

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
upload/1617786956-22348-capturedancran2021-04-0711144.jpg
ou
upload/1617786997-22348-capturedancran2021-04-0711151.jpg

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)