L’utilisation du Z-INDEX en CSS pour gérer l’empilement d’éléments dans une page




Aujourd’hui j’ai décidé de me pencher sur un petit soucis de construction du blog. A savoir l’empilement de certains éléments sur des pages (les articles et les photos).

Le problème était simple aux premiers abords, lorsque l’on ouvrait une vidéo comme l’une de celles placées en haut des articles, celle-ci s’ouvrait et déployait un nouvel élement qui malheureusement passait à travers la barre des menus et à travers le logo du site, en empêchant le visiteur de quitter la vidéo. C’était donc à la fois un soucis esthétique et un problème gênant pour la navigation du visiteur. Un petit exemple en image :

utilisation zindex css Lutilisation du Z INDEX en CSS pour gérer l’empilement déléments dans une page

La solution pour empêcher des éléments d’une page de passer l’un en dessous de l’autre

Encore une fois pour bien structurer un site, il va falloir passer par le CSS. C’est dire, qu’il est absolument important de bien penser et de bien hiérarchiser ses balises lorsque l’on débute la construction d’un site. La solution qui va nous permettre d’empêcher cet empilement d’éléments c’est la propriété z-index en CSS.

Qu’est ce que la propriété z-index ?

Cette propriété CSS va tout simplement permettre d’indiquer quels éléments peuvent être superposés et lesquels non. Le tout de manière hiérarchisée. C’est à dire que si l’on prend 3 images : A, B et C. Si l’on attribue à B un « z-index:1; » et à C un « z-index:2; », l’image C sera superposée sur les 3 premières. (A ayant une « position:relative; » et les 2 autres une position dite absolute) Dans ce cas l’image C est la plus « prioritaire », la B est la suivante et la A n’a aucune valeur de z-index ce qui implique qu’elle ne pourra pas être superposée.

Dans le cas du blog, le logo et la barre des menus avaient été mal orientés et la valeur que j’avais choisi par défaut était un « z-index:1000; ». A la base les vidéos n’étaient pas présentes dans mon schéma de construction, ce qui ne devait en rien influencer les valeurs des z-index.

Le résultat après avoir placé les valeurs précédents à z-index:1; par exemple :

utilisation zindex css 2 Lutilisation du Z INDEX en CSS pour gérer l’empilement déléments dans une page

Plus d’explications sur la propriété z-index

Si vous désirez avoir plus d’informations sur cette propriété, je vous invite à vous rendre sur le Developer Center de Mozilla qui présente cette propriété avec de bons exemples (images et code source en prime)




Partage sur les réseaux sociaux

      Pin It  


Laisser un commentaire




Si vous voulez une photo pour illustrer votre commentaire, rendez vous sur Gravatar.