Amener l’élément au premier plan à l’aide de CSS

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; } 
     

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; } 
     

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:

https://jsfiddle.net/orkLx6o8/