Je n’arrive pas à comprendre comment mettre les images en avant en utilisant CSS . J’ai déjà essayé de définir l’index z à 1000 et la position à relative, mais cela échoue toujours.
Voici un exemple-
#header { background: url(http://placehold.it/420x160) center top no-repeat; } #header-inner { background: url(http://placekitten.com/150/200) right top no-repeat; } .logo-class { height: 128px; } .content { margin-left: auto; margin-right: auto; table-layout: fixed; border-collapse: collapse; } .td-main { text-align: center; padding: 80px 10px 80px 10px; border: 1px solid #A02422; background: #ABABAB; }
text text text
Ajouter z-index:-1 et position:relative à .content
#header { background: url(http://placehold.it/420x160) center top no-repeat; } #header-inner { background: url(http://placekitten.com/150/200) right top no-repeat; } .logo-class { height: 128px; } .content { margin-left: auto; margin-right: auto; table-layout: fixed; border-collapse: collapse; z-index: -1; position:relative; } .td-main { text-align: center; padding: 80px 10px 80px 10px; border: 1px solid #A02422; background: #ABABAB; }
text text text
Remarque: l’index z ne fonctionne que sur les éléments positionnés ( position:absolute , position:relative ou position:fixed ). Utilisez un de ceux-ci.
Dans mon cas, je devais déplacer le code html de l’élément que je voulais au début du fichier html, car si un élément a un index z et que l’autre n’a pas d’index z, cela ne fonctionne pas.
Autre remarque: z-index doit être pris en compte lors de la recherche d’objects enfants par rapport à d’autres objects.
Par exemple
Si vous avez atsortingbué à branch_1__child un index z de 99 et que vous avez atsortingbué à branch_2__child un index z de 1, mais que vous avez également donné à votre branch_2 un index z de 10 et à votre branch_1 un index z, votre branch_1__child ne sera toujours pas branch_1__child devant votre branch_2__child
Quoi qu’il en soit, ce que j’essaie de dire, c’est: si un parent d’un élément que vous souhaitez placer devant a un z-index inférieur à son parent, cet élément ne sera pas placé plus haut.
Le z-index est relatif à ses conteneurs. Un z-index placé sur un conteneur plus haut dans la hiérarchie démarre essentiellement un nouveau “calque”
Incep [création]
Voici un violon à jouer: