Un menu et un bouton en premier plan lors de l'ouverture d'une photo fullscreen (diaporama)

**dhillig** · 02/12/2021, 05h20

Bonjour à tous,
J'ai un problème qui ne semble pas être du z-index (après de multiples vérifications), j'ai ma barre des menus et un "btn_up" qui viennent en premier plan lors de l'ouverture d'une image issue d'un diaporama.
J'ai tenté de rajouter un z-index dans les css ci-dessous, sans succès.
Auriez-vous une idée ?
Merci et bonne journée,
dh
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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
.grid {
	position: relative;
	margin: 0 auto;
}
 
.js .grid::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background: #252323 url(../img/loading.svg) no-repeat 50% 75px;
	background-size: 60px auto;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
 
.js .grid--loaded::after {
	opacity: 0;
}
 
.grid__item {
	width: 270px;
	padding: 10px;
}
 
.grid__item--current {
	opacity: 0 !important;
}
 
.img-wrap {
	display: block;
}
 
.img-wrap:focus,
.img-wrap:hover {
	outline: none;
}
 
.img-wrap img {
	display: block;
	max-width: 100%;
}
 
.preview {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	-webkit-align-content: center;
	align-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
 
.preview--open {
	pointer-events: auto;
}
 
 
/* circle overlay (generated SVG) */
 
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
 
.overlay circle {
	-webkit-transition: fill-opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: fill-opacity 0.3s, transform 0s 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale3d(0, 0, 1);
	transform: scale3d(0, 0, 1);
	fill: #1f1d1d;
	fill-opacity: 0;
}
 
.preview--open .overlay circle {
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	fill-opacity: 1;
}
 
.clone {
	position: fixed;
	z-index: 110;
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	transition: transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	-webkit-backface-visibility: hidden;
}
 
.original {
	position: relative;
	z-index: 120;
	display: block;
	object-fit: contain;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-backface-visibility: hidden;
}
 
.preview--open .animate {
	/* open */
	-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
	transition: transform 0.6s, opacity 0.2s;
}
 
.animate {
	/* close */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}
 
.description {
	color: #fff;
}
 
.js .description--grid {
	display: none;
}
 
.description--preview {
	position: fixed;
	z-index: 140;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2em 1em;
	text-align: center;
	opacity: 0;
	background: linear-gradient(180deg, transparent, #1f1d1d);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
 
.preview--open .description--preview {
	opacity: 1;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
 
 
/* Close button */
 
.action {
	font-size: 2em;
	margin-top: 300px;
	padding: 0;
	cursor: pointer;
	color: #6bd68a;
	border: none;
	background: none;
	z-index: 9999999;
}
 
 
.action:hover,
.action:focus {
	color: #6bd68a;
	outline: none;
}
 
.action--close {
	position: fixed;
	z-index: 99999999;
	top: 0;
	right: 0;
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(0.6, 0.6, 1);
	transform: scale3d(0.6, 0.6, 1);
}
 
.preview--image-loaded .action--close {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
 
.text-hidden {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
	color: transparent;
}

Nom : Capture d’écran 2021-12-02 à 05.07.45.png
Affichages : 148
Taille : 879,2 Ko

**jreaux62** · 02/12/2021, 15h06

Comme d'habitude...

**NoSmoking** · 02/12/2021, 17h36

Bonjour,

J'ai tenté de rajouter un z-index dans les css ci-dessous, sans succès.

A lire : Ce que personne ne vous a jamais dit à propos de z-index

**dhillig** · 02/12/2021, 20h10

Merci NoSmoking pour le lien.
Dans mon cas, je ne pense pas que ce soit une question d'opacité, mais l'astuce est excellente !
@jreaux62 : le "gabarit" est en ligne.
Un gros MERCI !
Bonne soirée,
dh

**dhillig** · 06/12/2021, 10h10

Bonjour NoSmoking,

Code :

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

1
2
3
4
5
.preview--image-loaded .action--close {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

Que puis-je faire de plus ?
Bonne journée,
dh

**NoSmoking** · 06/12/2021, 16h51

Que puis-je faire de plus ?

Avoir une structure HTML correcte et bien structurée justement !

Bien hiérarchiser tes z-index :

Code :

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

1
2
3
4
5
6
7
8
9
10
#btn_up {
    position: fixed;
    bottom: 70px;
    right: 25px;
    cursor: pointer;
    display: none;
    z-index: 99999999;
    color: #00CC99;
    font-size: 10px;
}

avec plus loin

Code :

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

1
2
3
4
5
6
7
8
9
#section4 {
    height: auto;
    background-color: #2e3842;
    width: 100%;
    position: relative;
    margin-top: 0px;
    padding-top: 80px;
    z-index: 99;
}

**dhillig** · 06/12/2021, 17h25

Merci NoSmoking,
Oui mais non, en changeant le z-index de la section entière, je masque la têtière et le btn_up; je souhaiterais un premier plan (masquer le reste) uniquement lorsque l'image est ouverte, après avoir cliqué sur la vignette.
D'où mon interrogation sur les CSS de la div "gallery".
Merci en tous cas et bonne soirée,
dh

**jreaux62** · 08/12/2021, 12h12

Bonjour,

Nosmoking t'a mis sur la voie.

A toi de bosser un peu !

sur http://lapagetest.fr/ :

Code css :

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

1
2
3
.menu {
...
    z-index: 999;

Code :

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

1
2
3
#btn_up {
...
    z-index: 99999999;

Modale (galerie) :

Code :

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

1
2
3
#section4 {
...
    z-index: 99;

Code :

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

1
2
3
4
 
.preview {
...
    z-index: 1000;

Tu as des kilomètres de code CSS, collés comme un patchwork, à droite, à gauche (dans la page, dans style.css,...)
Je suis sûr que tu ne sais pas ce qui sert à quoi...

Il faut FAIRE LE GRAND MÉNAGE + mettre des commentaires dans le code CSS, pour savoir à quoi sert ceci ou cela.

N.B. même les picots dans la barre de menu ne sont plus à leur place.
Tu as dû supprimé un bout de code utile...

Code :

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

1
2
3
4
5
6
7
8
.menu nav {
    /*float: right;*/ /* SUPPRIMER*/
    display: inline-block;
    position: absolute;
    width: auto;
    top: 0;
    right: 10px;
}

**dhillig** · 08/12/2021, 14h53

Bonjour jreaux62,
Je ne trouve pas ces CSS ??? :

Code :

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

1
2
3
4
5
6
7
8
.menu nav {
    /*float: right;*/ /* SUPPRIMER*/
    display: inline-block;
    position: absolute;
    width: auto;
    top: 0;
    right: 10px;
}

Ils sont dans la page ? J'ai pourtant regardé plusieurs fois

Pour ce qui est du preview, il est dans la div gallery qui se trouve dans la section 4.
La section 4 devant avoir un z-index inférieur au menu, on a beau changer le z-index du preview, il sera toujours inférieur au menu.
C'est ce que je comprends

Donc impossible d'avoir un preview en premier plan.

Merci, mais je ne vois pas d'issue. Ai-le tort ?
Merci pou ton aide.
dh

**jreaux62** · 08/12/2021, 15h02

Évidemment c'est possible...

Apprends les bases HTML , CSS
Fais le ménage,
Utilise l'"Inspecteur" F12

On ne peut pas tout faire à ta place.

**dhillig** · 08/12/2021, 15h30

Je ne trouve pas

et je ne comprends pas "l'inspecteur"

**jreaux62** · 08/12/2021, 17h08

Un bon début :

Apprendre le HTML -> Introduction au HTML
CSS : Feuilles de style en cascade -> Composer le HTML avec les CSS
Inspecteur (touche clavier : F12) -> Visite guidée de l'interface utilisateur

et aussi sur DVP :

Premiers pas avec les CSS

**NoSmoking** · 08/12/2021, 18h09

Ce que l'on peut dire de ta structure avec un z-index :

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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
[ 
  {
    "tagName": "DIV",
    "id": "",
    "className": "menu",
    "z-index": "999"
  },
  {
    "tagName": "DIV",
    "id": "ical",
    "className": "",
    "z-index": "99"
  },
  {
    "tagName": "DIV",
    "id": "btn_up",
    "className": "",
    "z-index": "99999999"
  },
  {
    "tagName": "DIV",
    "id": "myModal",
    "className": "modal fade",
    "z-index": "1050"
  },
  {
    "tagName": "DIV",
    "id": "bgfadewrap",
    "className": "",
    "z-index": "-1"
  },
  {
    "tagName": "DIV",
    "id": "bgfade1",
    "className": "",
    "z-index": "-1"
  },
  {
    "tagName": "DIV",
    "id": "bgfade2",
    "className": "",
    "z-index": "-1"
  },
  {
    "tagName": "DIV",
    "id": "bgfade3",
    "className": "",
    "z-index": "-1"
  },
  {
    "tagName": "SECTION",
    "id": "intro",
    "className": "",
    "z-index": "99"
  },
  {
    "tagName": "SECTION",
    "id": "top",
    "className": "",
    "z-index": "99"
  },
  {
    "tagName": "A",
    "id": "",
    "className": "button scrollTo",
    "z-index": "999999"
  },
  {
    "tagName": "DIV",
    "id": "chevron",
    "className": "",
    "z-index": "999999"
  },
  {
    "tagName": "A",
    "id": "",
    "className": "button scrollTo",
    "z-index": "999999"
  },
  {
    "tagName": "A",
    "id": "",
    "className": "button scrollTo",
    "z-index": "999999"
  },
  {
    "tagName": "DIV",
    "id": "",
    "className": "parallax",
    "z-index": "9"
  },
  {
    "tagName": "A",
    "id": "",
    "className": "iis-slide iis-current-slide",
    "z-index": "1"
  },
  {
    "tagName": "A",
    "id": "",
    "className": "iis-previous-nav",
    "z-index": "20"
  },
  {
    "tagName": "A",
    "id": "",
    "className": "iis-next-nav",
    "z-index": "20"
  },
  {
    "tagName": "SECTION",
    "id": "section3",
    "className": "",
    "z-index": "99"
  },
  {
    "tagName": "DIV",
    "id": "chevron_video",
    "className": "",
    "z-index": "999999"
  },
  {
    "tagName": "DIV",
    "id": "",
    "className": "parallax",
    "z-index": "9"
  },
  {
    "tagName": "SECTION",
    "id": "section4",
    "className": "",
    "z-index": "99"
  },
  {
    "tagName": "DIV",
    "id": "",
    "className": "preview",
    "z-index": "1000"
  },
  {
    "tagName": "BUTTON",
    "id": "",
    "className": "action action--close",
    "z-index": "99999999"
  },
  {
    "tagName": "DIV",
    "id": "",
    "className": "description description--preview",
    "z-index": "140"
  },
  {
    "tagName": "IMG",
    "id": "",
    "className": "original",
    "z-index": "120"
  },
  {
    "tagName": "IMG",
    "id": "",
    "className": "clone",
    "z-index": "110"
  },
  {
    "tagName": "DIV",
    "id": "footer",
    "className": "",
    "z-index": "2147483647"
  },
  {
    "tagName": "IMG",
    "id": "",
    "className": "logo",
    "z-index": "9999999"
  },
  {
    "tagName": "IMG",
    "id": "",
    "className": "logo",
    "z-index": "9999999"
  },
  {
    "tagName": "DIV",
    "id": "",
    "className": "pnt",
    "z-index": "0"
  }
 ]

j'ai l'impression que c'est un peu n'importe quoi !

**dhillig** · 09/12/2021, 06h08

Bonjour à vous,
Pour le footer, je me suis un peu énervé sur le z-index. Malgré un z-index élevé (n'est-ce pas

)
Il ne prend pas en compte mon :

Code :

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

background-color: #FFFFFF

;mais la couleur de mon body.
Je sais que ce doit être encore les bases, je pensais relancer une discussion après avoir résolu mes soucis de z-index et de parallax.
Bonne journée,
dh

**dhillig** · 09/12/2021, 06h16

J'ai tenté de mettre une opacity: .99 au menu, btn_up et une opacity: 1 au preview.
Cela ne change rien :/

Un menu et un bouton en premier plan lors de l'ouverture d'une photo fullscreen (diaporama)

CSS

Discussions similaires

Partager

Partager