Voir la source de Positionnement sur le web

Le modèle de positionnement proposé par HTML et CSS est très différent de celui que l'on peut trouver dans des logiciels de PAO type InDesign ou Scribus. La raison est simple: un site web peut être consulté sur de multiples dispositifs d'affichages. La taille est donc une inconnue, contrairement à l'imprimé où l'on met en page pour un format donné.

Le HTML est un flux de balises, et le comportement par défaut est de placer les balises les unes à la suite des autres.

== Modèles de boite ==

Deux grands types:
* en bloc (''block'')
* en ligne (''inline'')

Le type ''block'' chasse les balises suivantes à la ligne, contrairement au type ''inline''

Les navigateurs attribuent par défaut un type ''block'' aux éléments p, div, h1-6, ul, ol, dt, blockquote, figure, form etc. et un type ''inline'' aux éléments a, span, img, strong, em etc.

{{#widget:Iframe
|url=http://jsfiddle.net/aleray/RuBUT/embedded/result,html,css/
|width=100%
|height=100
|border=0
}}
Un cas particulier: les tableaux

[[Fichier:De_Campos_1962.gif]]

Haroldo de Campos, ''Untitled Poem'', 1962

{{#widget:Iframe
|url=http://jsfiddle.net/aleray/5855s/1/embedded/result,html,css/
|width=100%
|height=350
|border=0
}}

== Modèles de positionement ==

=== static (defaut) ===

Voir [http://jsfiddle.net/aleray/K9WN7/]

=== relative ===

{{#widget:Iframe
|url=http://jsfiddle.net/aleray/ZgqD3/2/embedded/result,html,css/
|width=100%
|height=200
|border=0
}}

=== absolute  ===

positionnement absolu dont l'origine est donnée par le document, ou bien l'élément parent si celui-ci n'a pas un positionnement ''static''.

[[Fichier:Gameoflogicbig.jpg|400px|thumb|left|Carrol Lewis' ''Game of Logic'']]

{{#widget:Iframe
|url=http://jsfiddle.net/aleray/8kCvu/embedded/result,html,css/
|width=100%
|height=350
|border=0
}}

=== fixed ===

Comme ''absolute'', mais insensible au défilement car se réfère au ''viewport'' (la fenêtre)

{{#widget:Iframe
|url=http://jsfiddle.net/3AvpU/3/embedded/result,html,css/
|width=100%
|height=350
|border=0
}}

== Unités de mesure ==

Les principales valeurs sont :
* ''px'' (absolu)
* ''em'' (relatif)
* ''%'' (relatif)


{{#widget:Iframe
|url=http://jsfiddle.net/aleray/GNXe9/embedded/result,html,css/
|width=100%
|height=350
|border=0
}}

== Ressources ==

* http://www.ubu.com/historical/gomringer/index.html