Cacher du contenu grâce au z-index

Ni hidden, ni coloration texte sur fond, ni position négative, ni Javascript : juste une superposition de calques.

Les div (le blanc et le rouge ci-dessus) sont décalés pour l'exemple.

Dans l'interprétation pour l'affichage, les éléments sont pris dans l'ordre où ils sont écrits.
Le z-index permet de fixer l'ordre d'empilement des calques (un div est un calque).
Le div dont le z-index a la plus grande valeur est affiché au-dessus.

Dans ce cas précis, le z-index est important puisque dans le flux des données, le contenu caché est écrit avant le contenu à montrer.

On utilise deux div parfaitement superposés par positions absolues.

<div style="margin:0;z-index:2;position:absolute;top:10;left:50;"> <p style="padding:5px;background-color:white;color:black;"> Comment masquer un contenu en utilisant le z-index. </p> </div> <div style="margin:0;z-index:1;position:absolute;top:10;left:50;"> <p style="padding:5px;background-color:red;color:white;"> Comment masquer un contenu en utilisant le z-index. </p> </div>

Les divs peuvent évidemment contenir une image.
L'image du header positionnée en top:0 et left:0 est un endroit idéal pour ce genre de masquage.

Le double-fond

On peut imaginer une page à double-fond.
On commence par couvrir la page par un div qui prend toute la place, on y met le contenu à cacher.
On recouvre le tout par un autre div qui servira de fond visible.
On termine par un div qui contiendra ce qui sera visible.

Testez ce code :
<html> <body style="font-family:arial,sans serif;border:0;margin:0;"> <div style="width:100%;height:100%;z-index:0;position:absolute;top:0;left:0;border:0;margin:0;">  </div> <div style="width:100%;height:100%;z-index:1;position:absolute;top:0;left:0;background-color:white;border:0;margin:0;">  </div> <div style="width:100%;height:100%;z-index:2;position:absolute;top:0;left:0;background-color:white;color:black;border:0;margin:0;">  <h1 style="text-align:center;">Mon site à moi</h1> </div> </body></html>

Pourquoi z-index ?

En représentation 3D conventionnelle, on utilise 3 axes :
- l'axe x : la longueur (la largeur de votre écran);
- l'axe y : la hauteur;
- l'axe z : l'épaisseur.