• Profondeur: réglage axe Z

    Nous utilisons régulièrement les positionnements selon les axes X (vertical) et Y (horizontal); il existe aussi un réglage en profondeur (axe Z) qui nous permet de, par exemple, toujours laisser en premier plan, un bouton de commande ou des positionner des images les unes sur les autres, en faisant remonter celle sélectionnée au survol, en premier plan.

    Pour qu'un élément soit positionné en profondeur, il faut qu'il soit positionné dans la page, c'est à dire qu'en attribut, il soit en position: absolute ou relative (ou fixed, moins courant).

    Donc, en CSS, z-index:**; doit être accompagné de position:**;

    z-index:**;  la valeur numérique, positive ou négative, indique le positionnement en profondeur; un élément en z-index:2; sera devant un autre élément en z-index:0;

    Plus le chiffre est élevé, plus l'élément est en premier plan; ceci va nous permettre, par exemple, de toujours laisser un bouton de commande apparent, au dessus d'un montage, au survol.

    Voyons des exemples; survolez la partie visible de l'image de dessous.

    Code:

    <p><img id="mg1" src="http://ekladata.com/3PE13WIJuY_NCywrv6bi7Bhom9U/3633b.jpg" alt="" /></p>

    <p><img id="mg2" src="http://ekladata.com/bdqP_Tss-fqN5oCeQlKeoYf55cc/3635b.jpg" alt="" /></p>

    <style type="text/css"><!--

    #mg1{position:absolute; z-index:5; transform:translate(10px,10px);}

    #mg2{transition:all 0.2s linear; position:absolute; z-index:2; transform:translate(300px,10px);}

    #mg2:hover{z-index:6;}

    --></style>



    <div style="width: 800px; height: 600px; margin: 10px auto;"><img id="bt1" src="http://ekladata.com/5vYRXqnn3UosWx7Y0xF1eIgstfw/btrec1.png" alt="" /> <img id="m1" src="http://ekladata.com/OG88URimZr76d0Ji4Xi511_rBLw/6171.jpg" alt="" /> <img id="m2" src="http://ekladata.com/Ex-OjS5Z-RZ-h6zxmgZ-FmvY9jg/6172.jpg" alt="" /></div>
    <style type="text/css"><!--
    #bt1{position:absolute; z-index:10; transform:translate(720px,10px);}
    #m1{position:absolute; z-index:5; transform:translate(0px,0px);}
    #m2{transition:all 0.2s linear; position:absolute; z-index:2; transform:translate(0px,0px);}
    #bt1:hover ~ #m2{z-index:6;}
    --></style>

    Je laisse volontairement les animations brutales car ce n'est pas le sujet.