La propriété position

Dans la page précédente je vous ai montré que pour mettre de front plusieurs éléments de type "blocs" on utilisait float : left / right ou display :inline-block. Alors à quoi sert 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 boite d'en-tête (HEADER) qui fait toute la largeur de l'écran est ancrée par rapport à ce dernier.
Le bloc du dessous (SECTION) glisse sous la boite HEADER lorsqu'on la fait remonter.

Le code de l'exemple

* {margin : 0px ; padding : 0px ; } body {width : 100%; } header {background : aqua; width : 100%; height : 200px ; position : fixed; z-index : 2 ;top : 0px ; left :0px ;} section {width : 1000px ; position : relative ; margin : 220px auto 20px auto; z-index :1; } nav, article{ background : skyblue ; height : 600px; } 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 boite est fixe par rapport à l'angle haut gauche de l'écran !

Grâce à un positionnement fixe pour la boite header et un z-index ayant une valeur supérieure à celle des autres boites, cette boite 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 boites NAV et ARTICLE) ce dernier glisse sous le bloc header puisque son z-index est inférieur à celui du bloc HEADER.

Positionnement absolu

Si vous voulez superposer des boites ou centrer verticalement une boite dans son conteneur il faut utiliser le positionnement absolu.

Pour positionner en absolu une boite il faut utiliser trois propriétés : position, left (ou right) top (ou bottom).
Attention si la boite parente n'est pas elle-même positionnée en absolu (ou fixe ou relatif) les coordonnées de la boite "enfant" sont déterminées par rapport à l'angle haut gauche de l'écran et non pas par rapport au coin haut gauche du conteneur parent.

Exemple 1

Les boites de couleur se superposent partiellement. La boite 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 !

Ici les coordonnées de left et top des boites "enfants" sont calculées par rapport à l'arête supérieure gauche de la boite conteneur car cette dernière est positionnée en relatif (#conteneur {position :relative;... }.

Les boites en couleurs se superposent partiellement dans l'ordre d'appel donné par le code HTML (3 sur 2 et 2 sur 1).
Si une boite en couleurs est survolée elle passe en premier plan (z-index passe à 2).

Exemple 2

Pour centre verticalement une boite dans son conteneur il faut utiliser le positionnement absolu.
En effet margin : auto auto auto auto; ça marche pas !


Il faut impérativement que la boite "enfant" ait une hauteur et une largeur et soit positionnée en absolu.
Dès qu'une boite est positionnée en absolu le centrage horizontal via margin n'est plus pris en compte.

La feuille de style :

#grande_boite{ position : relative ; width : 90% ;border : 1px solid red; height : 400px ; margin : auto ; } #petite_boite {position : absolute ; width : 60% ; height : 200px ; top : 50% ; margin-top :-100px ; left : 50% ; margin-left : -30%; background : pink ; } div p{margin : 10px ; font-size : 14pt; text-align : justify; }
Le rendu du code !

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 sur un élément.

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.
Retour menu