Mon texte (devant une div) n'apparaît pas.

Bonsoir tout le monde,

J’avais un texte (div class="texte") qui me posait pas de problème mais j’ai voulu lui mettre un fond (<div id="bolo"). Depuis que j’ai mis cette div, le texte n’apparaît plus. J’ai tenté de jouer avec le z-index sans succès

Je vous mets le html :

<div id="bolo">

								<div class="texte">MON TEXTE</div></div>

et les CSS :

			.texte {
				color: black;
				width: 100vw;
				padding-left: 20vw;
				padding-right:20vw;
				padding-top:10vh;
				padding-bottom: 10vh;
			}
#bolo {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
	  background: #55bb55;
  overflow: hidden;
  height: 100%;
  width: 100%;
  filter: blur(40px) saturate(5);
	z-index: -100;
}
#bolo div {
  height: 60%;
  width: 60%;
  background: #fc00ff;
  background: radial-gradient(circle, #ff0044 , #00dbde);
  position: absolute;
  border-radius: 50%;
}

Le fond est une animation js, j’ai tenté de remplacer le "#bolo div" par une classe, cela casse l’effet.

Merci pour votre aide

P.

Hello,

En utilisant position: absolute tu sors ton élément du flux, il ne rentre donc plus dans le calcul des dimensions de l’élément parent, qui devient donc virtuellement vide… donc avec un hauteur de 0.

Pense à utiliser l’inspecteur de ton navigateur pour voir les dimensions et positions de tes éléments

https://codepen.io/viki53/pen/JjByPpR

Salut viki53,

Merci pour ta réactivité

Si je suis ton codepen et que je mets une position relative, le texte n’apparaît toujours pas (en dehors de l’effet qui n’est plus celui qu’il était en position absolute).

Mais merci pour ton explication

J’ai de grosses lacunes niveau inspecteur… efin, je n’y comprends rien

Bonne fin de journée

Salut,

Ton texte se fait flouter aussi par ton filtre.

C’est le position: absolute qu’il faut enlever surtout, sinon les calculs de dimensions ne sont pas de la bonne façon pour que ton conteneur s’adapte.

Ensuite, comme l’a dit @Aabu, le flou appliqué au conteneur impacte également les descendants, dont le texte. J’ai réduit la valeur sur le Codepen pour que tu vois mieux l’effet.

Merci à vous.

Effectivement, le blur problème… je suis tombé sur ça mais je ne comprends pas vraiment :

https://stackoverflow.com/questions/22406478/remove-blur-effect-on-child-element

@viki53 : en position relative, l’effet est quasi nul, peut-on y remédier ?

Encore merci à vous

Essaie d’appliquer l’effet à un élément voisin de ton texte, plutôt qu’au parent.

Salut viki53,

J’ai tenté des choses mais je n’y arrive pas.

2 div dans une div parent, c’est bien ça ?

Les div ne se superposent pas. La div texte vient , quoi que je fasse, après la div bolo

Peux-tu m’en dire plus ?

Merci et bon dimanche

J’ai tenté ceci sans succès :

https://waytolearnx.com/2019/07/comment-superposer-une-div-sur-une-autre-div-avec-css.html#:~:text=Vous%20pouvez%20utiliser%20la,absolue%2C%20fixe%20ou%20relative).

AAAAAAA L’AAAIIIIIDDDDDEEEE

Ton code ressemble à quoi actuellement ? Tu as testé quoi ?

Salut viki53

J’ai testé deux div dans une div, et ceci :

https://waytolearnx.com/2019/07/comment-superposer-une-div-sur-une-autre-div-avec-css.html#:~:text=Vous%20pouvez%20utiliser%20la,absolue%2C%20fixe%20ou%20relative).

Mais je suis revenu au code initial car quoi que je fasse, la div texte vient après la div bolo

Merci et bonne journée

Ce serait bien d’avoir ton code réel et non celui d’un exemple que tu aurais pu mal suivre ou avec du code qui pourrait entrer en conflit avec le tien.

La technique peut fonctionner, reste à savoir comment l’utiliser

Merci viki53,

Je vais tâcher de te faire ça proprement ce week-end

T’es SUPER !

Bonjour viki53,

Il y a un long code js pour l’effet que je désire (un fond de page psyché).

La div "frère" hérite donc du code qui ce qui destroy le texte en premier plan:

J’ai longtemps cherché et j’ai malheureusement opté par un background gif animé.

Mais merci énormément pour ton aide. Je pensais que c’était uniquement un problème CSS… mais avec le js… trop compliqué pour moi

Bonne journée