Vous pouvez déterminer le type de positionnement pour une zone ou un élément. Pour ce faire, vous utilisez la propriété position. Cette propriété indique comment un élément doit être finalement positionné. Au total, quatre variantes de positionnement sont disponibles.
• static – aucun positionnement spécial n'est effectué et un flux de texte normal est utilisé.
• relative – un positionnement relatif est effectué, qui est basé sur la position normale ou initiale de l'élément.
• absolute – un positionnement absolu est effectué en utilisant les propriétés top, bottom, left et right. Les éléments positionnés absolument se trouvent en dehors du flux normal du texte. La position absolue est calculée par rapport aux bords de l'élément parent (mais seulement si celui-ci n'a pas la propriété position: static).
• fixed – l'élément est positionné absolument. Lors du défilement, l'élément reste en place.
Les deux premières variantes permettent un positionnement variable. Ici, les éléments sont positionnés les uns par rapport aux autres. Les deux exemples suivants montrent comment ce type de positionnement pourrait être effectué:
• L'élément 2 est décalé de 30 pixels par rapport à l'élément 1.
• L'élément 2 est placé derrière l'élément 1.
La situation est différente avec fixed et static. Avec ceux-ci, les éléments peuvent être positionnés à des endroits précis. Les indications de positionnement concernent l'élément parent ou la fenêtre du navigateur. Un exemple à ce sujet:
• L'élément 1 est exactement positionné à 30 pixels du bord droit et 20 pixels du bord supérieur de la fenêtre du navigateur.
Les différentes variantes de positionnement sont ensuite présentées en détail. Cependant, une remarque prévaut: dans le contexte du positionnement des éléments, le flottement joue un rôle important. Je reviendrai en détail sur ce principe CSS important dans le prochain tutoriel. Fondamentalement, le flottement concerne la manière dont les éléments du site Web circulent dans le document. Les éléments sont poussés dans la direction respective autant que possible. Le type de positionnement permet de déterminer explicitement le flottement des éléments.
Le positionnement relatif
En utilisant le positionnement relatif avec position: relative, deux choses se produisent:
• La boîte est déplacée hors de son flux normal.
• La place initiale de l'élément est réservée.
En réservant la place initiale, les autres éléments se comportent comme si l'élément était toujours à sa place.
Un exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Boîte 1</div>
<div>Boîte 2</div>
<div>Boîte 3</div>
</body>
</html>Ici, trois boîtes ont été définies.
Les deux boîtes 2 et 3 n'ont reçu aucune instruction de positionnement. Elles suivent donc le flux de document normal. En revanche, la boîte 1 a été positionnée relativement. Par conséquent, les boîtes 2 et 3 ne sont absolument pas affectées par la boîte 1. Leur place n'est donc pas revendiquée par ces boîtes. Le positionnement des boîtes se fait par les indications top, bottom, left et right. Avec le positionnement relatif, la position initiale dans le flux du document est considérée.
• top: 25px – la boîte est déplacée de 25 pixels vers le bas. 25 pixels sont insérés en haut de la position normale de la boîte.
• right: 25px – la boîte est déplacée de 25 pixels vers la gauche. 25 pixels sont insérés à droite de la position normale de la boîte.
Les valeurs en pixels sont relatives à la position initiale. Les indications déterminent où la valeur est insérée, c'est-à-dire en haut et à droite. Cet aspect est crucial. Les indications ne déterminent pas où la boîte est déplacée.
Le positionnement absolu
Passons maintenant au positionnement absolu. Ce type de positionnement retire complètement l'élément du flux. Les autres éléments de la page se comportent comme si l'élément n'existait pas du tout.
Un exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Boîte 1</div>
<div>Boîte 2</div>
<div>Boîte 3</div>
</body>
</html>Ici aussi, trois boîtes ont été définies. La boîte 1 est positionnée absolument.
Contrairement au positionnement relatif, aucune place n'est réservée pour la boîte 1. Les boîtes 2 et 3 remontent. Les indications de positionnement top, right, bottom ou left ne se réfèrent plus à la position initiale de la boîte dans le flux. Dorénavant, les indications se réfèrent à l'élément environnant le plus proche, positionné avec relative, absolute ou fixed. En l'absence d'élément environnant, le positionnement se fait par rapport à l'élément le plus haut de l'arborescence du document, c'est-à-dire html.
Un positionnement fixe
Avec position: fixed, les éléments peuvent être fixés. Voici un exemple à ce sujet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Effet de déchirure Partie 1</div>
<p>Le dernier tutoriel ou formation vidéo est disponible en ligne ou le contenu de la catégorie de téléchargement est exempt de points pendant une courte période. En savoir plus ici ...</p>
</body>
</html>La boîte fixée ne défile pas avec le reste de la page, elle reste toujours à la position qui lui a été assignée.
Pour les boîtes fixées, l'élément environnant est toujours la fenêtre du navigateur.
Veuillez noter qu'il y a des problèmes considérables, notamment en ce qui concerne la fixation des éléments sur les anciens navigateurs. Par exemple, IE6 ne fait pas ce qu'il devrait faire. Si vous souhaitez optimiser vos sites Web également pour ce navigateur, vous avez maintenant deux options:
• Renoncer aux boîtes fixes.
• Utiliser des hacks pour IE.
Si vous souhaitez utiliser un hack, je vous recommande de consulter le site http://thestyleworks.de/tut-art/iewinfixed.shtml. Un petit script JavaScript y est utilisé pour montrer comment obtenir des boîtes fixes même pour ce navigateur.
