|
Ces deux premiers exemples démontrent que la position statique ou relative est la position normale des éléments HTML dans une page Web.
img, p {position: static}
img, p {position: relative}
Le dimanche 26 décembre 1999, une tempête exceptionnelle, avec des vents mesurés de 150 à 200 km/h, a traversé toute la moitié nord de la France, pour atteindre finalement l'Allemagne et la Suisse. 
|
|
Cet exemple montre la position normale des éléments HTML dans une page Web. Aucune propriété de positionnement n'est spécifiée. Le bilan est catastrophique, quasiment toutes les régions de la Bretagne à l'Alsace et du Nord au Languedoc Rousillon ont été plus ou moins touchées par les bourrasques destructrices. Les dégats se chiffrent en dizaines de milliards de Francs.
|
|
Cet exemple montre la différence entre une position absolue et statique. L'image, placée après le paragraphe, se retrouve sous du texte.
p {position: absolute}
img {position: static}
Lundi soir, les autorités avaient recensé 39 morts parmi la population. Des monuments historiques et des milliers d'habitations ont subi des dommages considérables.
|
|
Dans cet exemple, l'image est placée avant le paragraphe qui se retrouve positionné à gauche de l'image en conservant les dimensions de sa boîte initiale. Ainsi, ce paragraphe n'obéit plus au redimensionnement automatique et déborde de la fenêtre.
img {position: static}
p {position: absolute}
L'importante couverture nuageuse du 11 août 1999 a gaché l'observation de l'éclipse. Seuls quelques rares sites privilégiés ont pu permettre d'apprécier dans sa totalité ce fabuleux phénomènes. |
|
Cet exemple montre la différence entre une position absolue et relative. L'image placée avant le paragraphe se retrouve positionnée au-dessus du texte.
p {position: absolute}
img {position: relative}
Les observateurs situés dans la zone d'éclipse totale ont été plongés dans l'obscurité pendant quelques secondes pour la plupart inoubliables. Beaucoup ont ressenti une baisse de températures de plusieurs degrés, lié a l'occultation du rayonnement solaire par la Lune. Bref, le spectacle fut exceptionnel.
|
|
Cet exemple montre la différence entre une position absolue et relative. Le paragraphe, placée après l'image, se retrouve à droite de l'image et sa boîte, conservant ses dimensions initiales, déborde de la fenêtre.
img {position: relative}
p {position: absolute}
Les rivières des Français et Mattawa situées dans les parcs provinciaux des voies navigables dans l'Ontario au Canada. Le nom de ces rivières évoque le souvenir des voyageurs peinant dans les portages, tirant leurs embarcations d'écorces de bouleau, les «canots de maître», pour contourner chutes et rapides, et pagayant devant des rochers polis pur les glaciers qui leur renvoient l'écho de leurs chants. |
|
Cet exemple montre la différence entre une position absolue et relative. Le paragraphe, placée avant l'image, se retrouve au-dessus de l'image qui flotte dans la page.
p {position: relative}
img {position: absolute}
Ces rivières forment un lien vital sur la route du commerce des fourrures entre Lachine (Montréal) et le lac Supérieur, puis vers le nord-ouest. De nos jours, les pagayeurs peuvent emprunter des chemins de portage inchangés depuis plus de 300 ans. Écoutez ! ... entendez-vous le chant des voyageurs ?
|
|
Cet exemple montre la différence entre une position absolue et statique. L'image placée avant le paragraphe se retrouve sous le texte et semble flotter dans la page.
img {position: absolute}
p {position: relative}
Le soleil s'est couché ce soir dans les nuées. Demain viendra l'orage, et le soir, et la nuit ; Puis l'aube, et ses clartés de vapeurs obstruées ; Puis les nuits, puis les jours, pas du temps qui s'enfuit ! Tous ces jours passeront; ils passeront en foule Sur la face des mers, sur la face des monts, Sur les fleuves d'argent, sur les forêts où roule Comme un hymne confus des morts que nous aimons. |