La propriété position

Si vous voulez superposer plusieurs boîtes ou encore si vous souhaitez ancrer une boîte par rapport à l'écran ou encore si vous voulez créer un effet 3D compatible avec de vieux navigateurs alors vous devez utiliser la propriété position.

Il faut utiliser conjointement avec position : fixed /absolute / relative les propriétés top (ou bottom) et left (ou right).
Pour ces quatre propriétés la valeur peut être exprimée en pixels ou en % !

Positionnement fixe

Exemple

La boîte d'en-tête (HEADER) qui fait toute la largeur de l'écran est ancrée par rapport à ce dernier.
La boîte du dessous glisse sous la boîte HEADER lorsqu'on la fait remonter.

Le code de l'exemple

* {margin : 0px ; padding : 0px ; } body {width : 100% ; } header {background : linear-gradient(to right, navy, blue, aqua, skyblue, white ) ; } header{ height : 200px ; width : 100% ; position : fixed; z-index : 2 ;top : 0px ; left :0% ; overflow :auto;} section {width : 100% ; height : 700px ; margin : 200px auto 0px auto ; z-index : 1 ; } nav, article{ background : skyblue ; } nav { width : 28% ; float : left ; } article { width : 70% ; float : right ; } ... <body> <header> ... </header> <section> <nav> ... </nav> <article> ... </article> </section> ...
Essayez ce code !

La position de la boîte est fixe par rapport à l'angle haut gauche de l'écran !

Grâce à un positionnement fixe pour la boîte header et un z-index ayant une valeur supérieure à celle des autres boîtes, cette boîte reste toujours affichée même lorsque vous faites défiler la page vers le bas.
En effet lorsque vous faites remonter le bloc section (contenant les boîtes NAV et ARTICLE) ce dernier glisse sous le bloc header puisque son z-index est inférieur à celui de la boîte HEADER.

Dans le cadre du "responsive web design" les valeurs des propriétés width, left, right sont exprimées en %.

Positionnement absolu

Si vous voulez superposer des boîtes ou centrer verticalement une boîte dans son conteneur il faut utiliser le positionnement absolu.

Exemple

Les boîtes de couleur se superposent mais avec un léger décalage vertical et horizontal.
La boîte survolée passe au premier plan.

Le code de l'exemple

... <style> #conteneur {position : relative; width : 90% ; height : 400px ; margin :auto ; border : 1px solid black;} #boite1, #boite2, #boite3 {position :absolute ;width : 40% ; height : 100px;} #boite1 {background : yellow ; top : 50px ; left : 10% ; } #boite2 {background : green ; top : 100px ; left : 20% ; } #boite3 {background : red ; top : 150px ; left : 40% ; } div:hover {z-index : 2 ; } ... <body> <div id ="conteneur"> <div id ="boite1"></div> <div id ="boite2"></div> <div id ="boite3"></div> </div> ...
Testez ce code !

Pour positionner en absolu une boîte il faut trois propriétés : position : absolute, left (ou right) top (ou bottom).

Attention si la boîte parente n'est pas elle-même positionnée en absolu (ou fixe ou relatif) les coordonnées sont déterminées par rapport à l'angle haut gauche de l'écran !
Ici les coordonnées left et top sont calculées par rapport à l'arête supérieure gauche de la boîte conteneur car celle-ci est positionnée en relatif.

Les boîtes de couleur se superposent partiellement dans l'ordre d'appel par le code HTML.

Si une boîte est survolée elle passe en premier plan (z-index passe à 2).

Positionnement relatif

L'objet est décalé en fonction des valeurs de top et de left par rapport à la position qu'il aurait du avoir normalement.
Donc si vous utilisez position : relative sans préciser top et left l'élément est positionné normalement !

Conseil : prenez l'habitude d'attribuer la propriété relative à body. Ainsi vous êtes sûr que pour les éléments enfants qui sont positionnés en absolu le seront par rapport à la page (et non pas par rapport à l'écran).

Tant que les propriétés text-shadow et box-shadow n'existaient pas on utilisait beaucoup le positionnement relatif pour créer un effet d'ombre.

Exemple

On veut afficher une image qui fait 400 par 300 avec un effet d'ombre sans utiliser la propriété box-shadow.
C'est ce qu'on appelle être "sado maso" (lol).

Le code de l'exemple

... <style> div {width : 400px ; height : 300px ; margin : 20px auto 20px auto ; background : gray ; } .decale {position : relative ; top : -10px ; left : -10px ; } ... <h1>Effet d'ombre</h1> <p>L'image insérée fait 400 par 300 (comme la boîte DIV). <h2>Première solution : fausse</h2> <div> <img src ="../images/nautile.jpg" /> </div> ... <h2>Deuxième solution : correcte</h2> <div> <img src ="../images/nautile.jpg" class ="decale"/> </div> ...
Le rendu de ce code !

L'image du nautile fait 400 par 300 comme la boîte DIV.

Dans la deuxième solution (la bonne) l'image ne recouvre pas complètement la boîte DIV.
Du fait de l'appel de la classe decale l'image est en effet décalée de 10 pixels par rapport à la position qu'elle aurait du avoir normalement.

Position : relative et CSS3

Avec les nouvelles propriétés box-shadow et text-shadow l'utilisation de position : relative est assez limitée.

Cependant position : relative est compatible avec margin:auto.
Pour que les boîtes "enfants" se positionnent par rapport à l'arête supérieure gauche de la boîte parente il faut que c'est dernière soit elle même positionnée.
Donc on va souvent trouver pour le conteneur principal : position : relative ; margin :auto
Retour menu