28114 sujets

CSS et mise en forme, CSS3

[Résolu] Forcer un z-index

Hello,
le sujet me semblait trivial, ça devient pourtant ma première demande sur un forum depuis aide4web dans les années 2000 Smiley lol

Alors j'ai une liste de projets auquel est rattaché une miniature,
au survol d'un projet, celle-ci doit apparaître dans un emplacement fixe au-dessus du reste.

De ce que je comprends de la vue "calque" de webkit/safari, chaque ligne est au dessus de la précédente dans son "z-index". Du coup les lignes suivante du projet se superposent (cf. capture d'écran)

Voici le CSS de l'image : 

.projet-thumb {
	display: block;
	position: fixed;
	z-index: 200 !important;
	top: 20%;
	right: calc(4 * var(--global-margin));
	max-width: 500px !important;
	width: auto;
	opacity: 0;
	transition: opacity 600ms ease-in-out 0s;
	max-height: 100vh !important;
	isolation:isolate;
}


et le CSS de l'élément titre : 
.ac {
	position: relative;
	border-bottom: 1px solid CurrentColor;
}


et le html est imbriqué comme suivant :

- div class="accordion-container"
   - div class="ac"
       - h2 ="ac-header"
           - img class="project-thumb"
   - div class="ac"
   - div class="ac"
   - div class="ac"
   - div class="ac"
   - div class="ac"…


J'ai beau cherché, je ne vois plus d'options pour forcer l'image à être au dessus de tout.
Je pensais que le positionnement fixe + z-index + isolation:isolate suffisait.

Merci d'avance pour votre aide précieuse,
j'ai franchement passé pas mal de temps à googler avant.

upload/1702563715-85600-capturedaeacran2023-12-14aa15.jpg
upload/1702563651-85600-capturedaeacran2023-12-14aa15.png
Modifié par PullRouge (14 Dec 2023 - 15:22)
Modérateur
Salut,

Est-ce que tu pourrais nous donner un peu plus de contenu ? Je pense qu'il doit y avoir un conflit avec une autre partie de ton code car avec seulement les élément donné il n'y a pas de raison que ca ne fonctionne pas. Est-ce que ton code est en ligne ? Est-ce que tu peux le reproduire dans https://jsfiddle.net/ ou https://codepen.io/pen/ ?

Mon test : https://jsfiddle.net/wq0129vx/

PS au passage : tu parles de img class="project-thumb" et dans ton CSS c'est projet-thumb j'imagine que c'est une faute de frappe dans ce post et pas dans ton code mais sait-on jamais...
Modifié par _laurent (14 Dec 2023 - 16:49)
Modérateur
Salut,

Alors tout marche parfaitement sur Chrome mais effectivement ca bug coté Firefox. Et j'ai un doute quand à la responsabilité de l'animation...

Tu peux tenter d'enlever les animation notamment le fadeIn des .projets-animation .ac ?
Ça bug sur Firefox et Safari. Par contre tu as résolu le problème, j'ai mis en commentaire toute cette partie :

.projets-animation .ac{
/*    opacity: 0;
    animation: fadeIn ease-in-out 2s;
  	animation-iteration-count: 1;
    animation-fill-mode: forwards;*/
}

et du coup, plus de problème. Enfin presque, car ce n'est pas normal cette situation. Bref, je vais tenter de faire une apparition ligne par ligne en javascript Smiley baille

Merci en tout cas, je n'aurai jamais pensé à animation

Je complète après quelques recherches : en lisant cet article : https://www.appsloveworld.com/google-chrome/28/css-animation-fill-mode-and-z-index-issue puis ce lien https://jsfiddle.net/Lxsf9ako/2/,
j'ai ajouté deux états de z-index aux éléments parents : 

.projets-animation .ac{
    opacity: 0;
    animation: fadeIn ease-in-out 2s;
  	animation-iteration-count: 1;
    animation-fill-mode: forwards;
	z-index: 10;
	/* Z-index Bug d'affichage avec animation-fill-mode  */
}

.projets-animation .ac:hover {
	z-index: 100;
	/* Z-index Bug d'affichage avec animation-fill-mode  */
}


J'espère que ça aidera les prochains ! Merci Laurent !
Modifié par PullRouge (15 Dec 2023 - 17:56)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à