Au cours de l'atelier précédent, nous avons vu comment l'utilisation de la propriété css float permettait de s'affranchir de certaines contraintes du positionnement dans le flux, comportement par défaut du html et comment la propriété clear permettait de rétablir celui-ci.
Il nous reste à expérimenter la propriété css position qui permet également de s'affranchir du positionnement dans le flux. On peut attribuer à la propriété position, cinq valeurs :
- position : relative
- position : absolute
- position : fixed
- position : static
- position : inherit
Un élément en position relative, absolute ou fixed, peut être décalé par rapport à sa position initiale, par les propriétés top, bottom, left ou right dont les valeurs peuvent être exprimées dans toutes les unités dimensionnelles.
À partir d'ici et jusqu'au bas du cadre PRÉAMBULE, j'ai fait de nombreux emprunts à Alsacreation
La position relative permet de décaler un élément par rapport à une position de référence: celle qu'il avait dans le flux. Les éléments qui le suivent et le précèdent ne sont pas
influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale.
Cette position est rarement recherchée, elle est cependant utile dans les deux cas suivants :
- Servir de référent à un élément enfant positionné en absolute (rappelons qu'un élément positionné en absolute grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné).
- Bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments (propriété inopérante pour des éléments du flux).
Contrairement aux flottants que nous avons vus dans l'atelier précédent, la position absolute permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code.
La position absolue s'affranchit définitivement du cordon liant contenu et présentation. L'élément est totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient. Le positionnement absolu est une méthode radicale (et puissante) qui retire tout à fait un élément du flux.
Un élément positionné en absolute se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.Le positionnement fixed est une variante du positionnement absolute , à l'exception des points suivants:
- Lorsque le positionnement est précisé (top, right, …), l'élément est toujours positionné par rapport à la fenêtre du navigateur
- La position intiale de l'élément est fixé à un endroit au chargement de la page et ne pourra se mouvoir, même lors de l'activation d'une barre de défilement.
La position static correspond simplement à la valeur par défaut d'un élément du flux. La position static sert simplement à rétablir dans le flux un élément positionnée hors du flux.
Pour mémoire , la position inherit déclare que l'élément concerné hérite de la propriété position de son parent. Par exemple, si la position du parent est de type absolute, l'élément concerné aura également ce positionnement.
Ouvrons la feuille de style externe et modifions les sélecteurs .Gauche et .Droite :
- width : 360px;
- height : 160px;
- suppression de float : left et float : right
Ajoutons également quelques propriétés au sélecteur de type p :
- p {
- padding : 10px;
- background : #8b0;
- }
Dans le code html, créons un élément <div class="Boites2> dans lequel nous placerons :
- Un titre <h3> "Le positionnement dans le flux"
- Un élément <p> non dimensionné, non positionné
- Un élément <p class="Gauche">
- Un élément <p class="Droite">
Cet ensemble nous servira d'élément de référence pour les autres expériences.
Ouvrons la feuille de style externe et créons-y les sélecteurs ci-dessous :
- .Relatif, .Absolu, .Fixe {
- width : 400px;
- height : 110px;
- }
- .Relatif {
- position : relative;
- }
- .Absolu {
- position : Absolute;
- }
- .Fixe {
- position : fixed;
- }
Dans le code html, créons un élément <div class="Boites2> dans lequel nous placerons :
- Un titre <h3> "Le positionnement relatif"
- Un élément <p class="Relatif" style="background:#FF6;" >
- Un élément <p class="Relatif" style="background:#0D0; left:200px; top:-100px;">
- Un élément <p class="Relatif" style="background:#0CF; right:150px; bottom :100px;">
- Un élément <p> non dimensionné, non positionné
CONSTATS :
- Si les valeurs de top, right, bottom et left ne sont pas précisées, un élément placé en position : relative se comporte comme s'il était placé dans le flux.
- top, right, bottom et left décalent l'élément en position : relative par rapport à la position qu'il occuperait s'il était dans le flux.
- C'est la position initiale dans le flux de l'élément en position : relative qui détermine la position des élément suivants.
1er Exercice : Dans le code html, créons sous le précédent, un nouvel élément <div class="Boites2> dans lequel nous placerons :
- Un titre <h3> "le positionnement absolu par rapport à body"
- Un élément <p class="Absolu" style="background:#AF0;">
- Un élément <p> non dimensionné, non positionné
Dans le style en ligne de l'élément <p class="Absolu"> ajoutons les propriétés top:400px; left:200px;
CONSTATS :
- Si les valeurs de top, right, bottom et left ne sont pas précisées, l'élément placé en position : absolute occupe la position qu'il occuperait s'il était placé dans le flux, mais à la différence d'un élément placé en position : relative il n'a pas d'incidence sur les éléments placés après lui.
- L'ajout des propriétés top:400px; left:200px; positionne l'élément par rapport à l'angle haut-gauche de body.
- L'élément en position : absolute recouvre les autres éléments et n'a pas d'incidence sur les positions des éléments voisins.
- L'élément en position : absolute suit le défilement de la page.
2ème Exercice : Dans le code html, créons sous le précédent, un nouvel élément <class="Boites2" style="position:relative;"> dans lequel nous placerons :
- Un élément <p class="Absolu" style="background:#AF0; top:100px; left:200px;">
- Un titre <h3> Le positionnement absolu par rapport à <div class="Boites2"> en position relative
- Trois éléments <p> non dimensionnés, non positionnés
CONSTATS :
- L'élément se positionne par rapport à l'angle haut-gauche de <class="Boites2" style="position:relative;"> et suit le défilement de la page.
- L'élément en position : absolute recouvre les autres éléments et n'a pas d'incidence sur les positions des éléments voisins.
Dans le code html, créons sous le précédent, un nouvel élément <div class="Boites2> dans lequel nous placerons :
- Un élément <p class="Fixe" style="background:#b7c;top:300px;left:500px;">
- Un titre <h3> "le positionnement fixé"
- Un élément <p> non dimensionné, non positionné
CONSTATS :
- L'élément en position : fixed se positionne par rapport à l'angle haut-gauche de body, dans notre cas, au milieu de l'écran et reste fixe dans cette position quand on fait défiler la page.
- L'élément se superpose à tous les autres éléments de la page.
Dans l'élément <p class="Fixe"> du dernier élément <div class="Boites2>, ajoutons dans le style en ligne la propriété position : static.
CONSTATS : L'élément <p class="Fixe"> se comporte comme un élément placé normalement dans le flux. Le positionnement static, a annulé la propriété position : fixed attribuée à l'élément par la feuille de style.
Les positionnements relative, absolute et fixed ne sont pas seulement des curiosités théoriques et des prétextes à des exercices qui peuvent paraître futiles, ils sont mis en pratique dans différentes applications fort utiles pour la composition des pages html.
Dans la feuille de style interne de la page html, modifions d'abord les propriétés de la class .Absolu :
- .Absolu {
- width : 500px;
- height : 200px;
- }
Dans le code html, créons sous le précédent, un nouvel élément <div class="Boites2 style="position : relative; height : 400px"> dans lequel nous placerons :
- Un titre <h3> "Le centrage absolu dans une <div class="Boites2"> en position relative"
- Un élément <p class="Absolu" style="background : #AF0; top : 50%; left : 50%;">
CONSTAT : L'angle haut-gauche de l'élément <p class="Absolu"> est positionné au centre de l'élément <div class="Boites2"> .
Dans le style en ligne de l'élément <p class="Absolu">, ajoutons maintenant les propriétés margin-left : -250px; margin-top : -100px. Ces valeurs négatives sont égales à la demi-largeur et à la demi-hauteur de l'élément <p class="Absolu">.
CONSTAT : L'élément <p class="Absolu"> est maintenant centré dans l'élément <div class="Boites2"> .
Si l'on fait varier la largeur ou la hauteur de l'élément <div class="Boites2">, l'élément <p class="Absolu"> reste néanmoins centré.
LES MENUS DÉROULANTS : Le positionnement absolu par rapport à un élément en position relative est utilisé pour réaliser des menus déroulants à deux ou plusieurs niveaux.
Les items du premier niveau du menu placés en position relative servent de référence aux items du niveau suivant qui sont placés en position absolute et
peuvent se dérouler sur la page sans déplacer les éléments que celle-ci contient.
LES CADRES FIXES : Le positionnement fixed permet de réaliser dans les pages html, des en-têtes ou des colonnes de menu qui ne suivent pas le défilement de la page
et qui offrent un comportement identique à celui des anciennes mises en page en cadres (ou frame).
Seul inconvénient, la propriété position : fixed n'est pas interprétée par les versions d'Internet Explorer antérieures à IE6.
Nous verrons dans les exemples de mise en page que nous réaliserons en 2011, comment mettre en oeuvre ces applications.