28172 sujets

CSS et mise en forme, CSS3

Probleme d'overlap avec une position absolute

Bonjour la communauté, j'ai un petit souci d'overlap avec une position absolute d'une image.

J'ai mon images en position absolute
J'ai mon texte en position relative
Et en dessous de ces deux élèments j'ai encore du texte.

Le probleme c'est que dès que je n'ai pas assez de texte qui supperpose mon image, le texte qui est en dessous passe par dessous mon image, or j'aimerais que le texte soit en bas de mon image en suivant.

Pour être plus concret, voici le code HTML, ainsi qu'une capture d'écran :

<div class="col-sm-6">
				<div class="pos-relative">
					<img class="pos-absolute" src="<?php bloginfo('template_directory'); ?>/images/bg-bulle-fab-francaise.png" alt="Terra Aquatica - Empowering Nature" />
					<div id="fab-francaise" class="contenu-bulle">
						<h3 class="vert">Les systèmes</h3>
						<div style="max-width: 260px;"><?php the_field('les_systemes_ns'); ?></div>
					</div>
				</div>
				<a href="<?php echo site_url(); ?>/faq" class="question-faq">Pourquoi choisir un dispositif par rapport à un autre ?</a>
			</div>


upload/1516352170-44354-capturedaeacran2018-01-19aa09.png

Auriez vous une solution pour que le texte du dessous passe en bas par hasard? En sachant que je ne souhaite pas utiliser de min-height si possible car j'ai pas mal de bulle différentes et que j'aimerais éviter de changer chaque element dès que j'ai un viewport différent.

Merci par avance
Pierre
Modifié par kenblock81 (19 Jan 2018 - 09:56)
Modérateur
Bonjour,

Pourquoi ne pas mettre l'image en position relative et le contenu de la bulle en position absolute ?

Amicalement,
parsimonhi a écrit :
Bonjour,

Pourquoi ne pas mettre l'image en position relative et le contenu de la bulle en position absolute ?

Amicalement,


J'y ai pensé, mais dans d'autres bulles c'est le texte qui est plus gros que la bulle, du coup ça poserait le même souci. =s
Bonjour Ken,
as tu essayé d'utiliser la propriété css z-index pour fixer tes problèmes d'overlapping en rajout de tes propriétés de positionnement ?
vois l'utilisation de la propriété z-index comme des valeurs de calques que tu donnes (0 étant la valeur par Default quand non déclarée).
rentrer une valeur négative signifie que tu mets un bloc en arrière plan.
un valeur positive : au premier plan.
tu peux ainsi agencer tes bloques et tes "overlappings" comme bon te semble par leur valeur de z-index.

un très bon article Alsa ici :
https://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html

tiens nous au courant
parsimonhi a écrit :
Bonjour,

Et mettre l'image en background du texte de la bulle ?

Amicalement,


J'ai testé mais le hic c'est que si le texte est trop court, le bout de la bulle est masqué. Smiley ohwell
vilkoyote a écrit :
Bonjour Ken,
as tu essayé d'utiliser la propriété css z-index pour fixer tes problèmes d'overlapping en rajout de tes propriétés de positionnement ?
vois l'utilisation de la propriété z-index comme des valeurs de calques que tu donnes (0 étant la valeur par Default quand non déclarée).
rentrer une valeur négative signifie que tu mets un bloc en arrière plan.
un valeur positive : au premier plan.
tu peux ainsi agencer tes bloques et tes "overlappings" comme bon te semble par leur valeur de z-index.

un très bon article Alsa ici :
https://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html

tiens nous au courant


Yep merci pour le lien mais je connais, en fait le probleme n'est pas tant que le texte soit dessous ou dessus, c'est que je veux qu'il soit à la suite de la bulle. Que la propriété absolute s'arrete après le texte pour eviter cet overlap Smiley decu
Modérateur
Bonjour,

Et les images ne peuvent pas être rétrécies ou agrandies en étant en background pour faire la taille du texte de la bulle ?

Si on ne peut pas adapter les images aux textes de la bulles, si on ne peut pas avoir de min-height (au moins sur les images), et si on ne sait pas à l'avance si l'image est plus grande que le texte ou inversement, ça va être difficile à résoudre en css ! Smiley cligne

Amicalement,
parsimonhi a écrit :
Bonjour,

Et les images ne peuvent pas être rétrécies ou agrandies en étant en background pour faire la taille du texte de la bulle ?

Si on ne peut pas adapter les images aux textes de la bulles, si on ne peut pas avoir de min-height (au moins sur les images), et si on ne sait pas à l'avance si l'image est plus grande que le texte ou inversement, ça va être difficile à résoudre en css ! Smiley cligne

Amicalement,


Je crois que je vais mettre un min-height, ca sera la meilleure solution car sinon effectivemnet je vais pas m'en sortir Smiley cligne lol
Sujet clos
Aller à