Discussion :

[el_debutanti]

Bonjour à tous et bonne année,
Voici une partie de mon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
><div id="bolo"></div>
div class="texte"><h1>Titre</h1>Texte</div>

Je souhaiterais que la div "texte" par dessus la div "bolo" qui est une animation JS utilisant l'effet blur.
Je vous donne mes CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#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: fixed;
  border-radius: 50%;
		z-index: 99999;
 
}
.texte {
color: black;
width: 100vw;
padding-left: 20vw;
padding-right:20vw;
padding-top:10vh;
padding-bottom: 10vh;
background-color: white;}

Merci pour votre aide et bonne soirée,
ED

[el_debutanti]

Bonjour,
Je ne peux malheureusement pas adapter ceci :
https://waytolearnx.com/2019/07/comm...0ou%20relative
car problème de position(s) mais je suis tout de même obligé de superposer les div pour éviter ceci :
https://jsfiddle.net/6V3ZW/
Bonne journée

[labarre2002]

BOnjour

el_debutanti


J ai ete confronte au meme probleme mais je suis sans reponse depuis des lustres.
La solution que propose le lien que tu postes resoud pas non plus mon soucis.

[el_debutanti]

Bonsoir labarre2002,
Espérons que quelqu'un réponde...
Bonne soirée,
ED

[two3d]

1. Le code correct est de mettre la classe .texte en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
position:absolute;
top:0;
right:0;
bottom:0;
left:0;

et la mettre à l'intérieur de la div #bolo, qui elle est en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position:relative; /* pour que la position absolute des div enfantes s'arrêtent aux bords de cette div */

Et je vous informe qu'il ya pas besoin de z-index: 99999 ou z-index: -100, simplement un z-index: 2 pour la div dessus et un z-index: 1 pour la div dessous

[el_debutanti]

Bonjour two3d,
Merci pour ta réponse et tes explications très claires.
Actuellement, la div "texte_a" n'est plus sous la div "bolo" (car même div), mais derrière, malgré le z-index
J'ai pourtant suivi scrupuleusement tes indications, soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#bolo
{
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #55bb55;
	overflow: hidden;
	height: 100%;
	width: 100%;
	filter: blur(40px) saturate(5);
	z-index: 1;
}
 
#bolo div
{
	height: 60%;
	width: 60%;
	background: #fc00ff;
	background: radial-gradient(circle, #ff0044 , #00dbde);
	position: fixed;
	border-radius: 50%;
	z-index: 1;
}
.texte_a
{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 2;
}

et le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="bolo">
<div class="texte_a">
	<h1>Bolo</h1>
	texte</div></div>

A moins que quelque chose m'ai échappé ?

Merci et bon week-end