Superposer deux div

**el_debutanti** · 16/01/2023, 19h26

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** · 17/01/2023, 04h54

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** · 18/01/2023, 09h59

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** · 18/01/2023, 20h10

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

**two3d** · 20/01/2023, 22h32

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** · 21/01/2023, 11h39

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

**two3d** · 21/01/2023, 16h15

Oui, c'est normal que ton z-index ne fonctionne pas car tu la mis à 1 partout :

#bolo div == .texte_a, tu peux donc rassembler les deux règles CSS et continuer dans ce sens.

Reviens si tu bloque ailleurs

Au passage, ton indentation est mauvaise :

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>

Correct, plus compréhensible :

Code html :

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

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

**el_debutanti** · 21/01/2023, 17h21

Bouhhhhhh

Ça ne fonctionne toujours pas avec ces 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
#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);
	border-radius: 50%;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 2;
}

**two3d** · 21/01/2023, 22h44

Tu as des attributs en doubles, comme background dans .texte_a ou height et width dans la div parente.

Solutionne ça déjà et prend une capture du résultat pour nous montrer tes attentes stp.

Préfère pointer vers .texte_a au lieu de #bolo div vue que tu lui donnes une classe, autant qu'elle serve à quelque chose

**el_debutanti** · 22/01/2023, 06h41

Merci pour ta gentillesse two3d

Corrections effectuées. Merci... je me suis emmêlé les pinceaux ce qui a donné un résultat plus que critiquable :/
Toujours rien à l'horizon si ce n'est la div #bolo

Ci-joint la capture.
Merci et bon dimanche

Nom : Capture d’écran 2023-01-22 à 06.33.34.jpg
Affichages : 108
Taille : 181,5 Ko

**two3d** · 22/01/2023, 11h30

En fait tu vois pas la div enfante parce que tu y met un filtre (filter) à la div parente, enlève le, tu verra la div enfante

Je te suggère d'utiliser l'inspecteur de ton navigateur (Firefox ou Chrome) pour pointer vers la div que tu veux et travailler facilement sur ses règles CSS.

Pour utiliser l'inspecteur c'est CTRL + SHIFT + I ou Clic droit sur la div en question > Inspecter

**el_debutanti** · 22/01/2023, 14h26

Je ne peux pas conserver le "blur" ???

ET j'ai mon texte qui "rotate"

Nom : Capture d’écran 2023-01-22 à 14.23.55.jpg
Affichages : 89
Taille : 502,5 Ko

**two3d** · 22/01/2023, 15h37

C'est un matrix carrément ton bordel, pas un rotate ^^ tu doit avoir une "dépendance" quelque part, un transform:[quelquechose] dans le parent de #bolo

Tu peux peut être conserver le filter en mettant à la div enfante : filter:unset

**el_debutanti** · 22/01/2023, 15h57

Pas de dépendance, et filter:unset ne fonctionne pas

Le problème est ailleurs

Merci pour ton aide

**two3d** · 22/01/2023, 16h17

Comment ça se fait que tu as plusieurs cercles rouges (blur) dans ta div ? Tu utilise une boucle en PHP peut être ?

Essaye ton code sans PHP, juste la div HTML et un texte bidon, tu y arrive mieux à comprendre.

**el_debutanti** · 22/01/2023, 16h28

Non non, pas de PHP, du JS

Code javascript :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var blobCount = 20;
function randy(min, max) {
	return Math.floor(Math.random() * (1 + max - min) + min);
}
var time = 4,
    tl = new TimelineMax({repeat: -1,yoyo:false}),
    bolo= document.getElementById("bolo");
for (var i = 0; i < blobCount; i++) {
  var div = document.createElement("div");
  bolo.appendChild(div);
}
var blobs = bolo.children;
initSettings = [];
for (var i = 0; i < blobs.length; i++) {
  var init = {};
  init.rot = randy(-2500,2500);
  init.rotX = randy(-2500,2500);
  init.rotY = randy(-2500,2500);
  init.rotZ = randy(-2500,2500);
  init.left = randy(-40,130) + "%";
  init.top = randy(-40,130) + "%";
  initSettings.push(init);
  tl.set(blobs[i], {
    rotation: init.rot,
    rotationX: init.rotX,
    rotationY: init.rotY,
    rotationZ: init.rotZ,
    left: init.left,
    top: init.top,
  });
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time*6, {
    rotation: "+="+3600,
    rotationX: "+="+3600,
    rotationY: "+="+3600,
    rotationZ: "+="+3600,
    ease: Power0.easeNone
  }, 0);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time*2, {
    left: randy(-40,130) + "%",
    ease: Sine.easeInOut
  }, 0);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time, {
    top: randy(-40,130) + "%",
    ease: Sine.easeInOut
  }, 0);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time*2, {
    top: randy(-40,130) + "%",
    ease: Sine.easeInOut
  }, time);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time*2, {
    left: randy(-40,130) + "%",
    ease: Sine.easeInOut
  }, time*2);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time*2, {
    top: randy(-40,130) + "%",
    ease: Sine.easeInOut
  }, time*3);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time*2, {
    left: initSettings[i].left,
    ease: Sine.easeInOut
  }, time*4);
}
for (var i = 0; i < blobs.length; i++) {
  tl.to(blobs[i], time, {
    top: initSettings[i].top,
    ease: Sine.easeInOut
  }, time*5);
}

Le problème du texte vient peut-être de là ?
J'abandonne ou pas ?

**two3d** · 22/01/2023, 17h23

En effet, ya bien un axe Z utilisé dans la génération JS, mes dires se confirment pour le matrix.

Ce que je vois aussi c'est que plusieurs div avec un même ID sont créées, c'est incorrect, un ID doit être utilisé une seule fois dans un document HTML, la classe elle en revanche .maClasse peut être utilisée à plusieurs endroits.

Essaye en mettant une classe et non un ID, fait en sorte également de pointer tes règles CSS vers cette nouvelle classe (tu peux faire simple en remplaçant #bolo par .bolo.

Vu la complexité du code et ton niveau, tu devrait commencer par quelque chose de plus simple, que tu puisse comprendre ton code.

**el_debutanti** · 22/01/2023, 17h38

Essaye en mettant une classe et non un ID, fait en sorte également de pointer tes règles CSS vers cette nouvelle classe (tu peux faire simple en remplaçant #bolo par .bolo)

Tu parles du JS ? Dans le HTML, il n'y a qu'un #bolo