|
Bases Des Css /
Positionnement
Différence (dernière modification)
(pas d'autres différences, affichage normal de la page)
Modifié: 1c1,84
Décrivez ici la nouvelle page.
|
===En bref=
Cette page décrit la propriété CSS Position. Cette propriété permet de spécifier si un élément doit être positionné de façon relative ou absolue. Depuis CSS 2.0, il existe différentes propriétés de feuille de style pour positionner au pixel près les éléments d'une page Web.
[[toc]Index]
===La propriété 'position'=
*Valeur : static | relative | absolute | fixed | inherit
*Initiale : static
*S'applique à : tous les éléments, sauf à un contenu généré
* Héritée : non
*Pourcentage : sans objet
* Médias : visuel
Les valeurs de cette propriété ont le sens suivant :
====static=
La boîte est normale, placée selon le flux normal. Les propriétés 'left' 'top' 'right' et 'bottom' ne s'y appliquent pas.
exemple
====relative=
L'emplacement de la boîte est calculé selon le flux normal (ce qu'on appelle la position dans le flux normal). Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l'emplacement de la boîte suivante est calculé comme si B n'avait pas été déplacée.
exemple
Dans cette exemple on peut très clairement voir que l'espace occupé par la boite déplacée est conservé, comme si celle-ci n'avait pas été déplacée. On peut aussi noter que la boite se déplace avec toutes ses propriétés par défaut tant que de nouvelles n'ont pas été spécifiées, ainsi celle-ci garde sa longueur initial (100% de la fenêtre moins 2X 5px de marges) et une partie de celle-ci disparaît donc à droite forçant un scroll horizontal.
====absolute=
L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. Celles-ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges celles-ci ne fusionnent pas avec d'autres marges.
exemple
Dans cet exemple le positionnement se fait en fonction du bloc conteneur <body> avec les propriétés top et left. La boite étant sortie du flux, les autre boites se positionnent comme si celle-ci n'existait pas.
On peut noter que lorsqu'un bloc est en positionnement absolue, cela implique un certain nombre de choses :
*Ses dimensions changent, si elle ne sont plus spécifiées elles prennent la valeur auto, définit en fonction du contenu.
*Dans l'ordre d'empilement des boites, celle-ci crée un nouveau niveau qui vient dessus les précédents niveaux.
====fixed=
L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte est en plus fixe par rapport à une référence donnée. Pour les médias continus, par rapport à la zone de visualisation (la boîte ne bouge pas lors d'un défilement). Pour les médias paginés, par rapport à la page, même si celle-ci apparaît dans une zone de visualisation (par exemple lors d'un aperçu avant impression).
exemple
Dans cet exemple, on observe que la boite se positionne avec la même logique que dans un positionnement absolu, la différence se faisant dans le fait que le bloc ne bougera pas lors du scroll.
Ce type de positionnement peut s'avérer très efficace pour des menu de navigation dans des pages longues.... mais reste sous-utilisé car InternetExplorer Windows ne sait pas interpréter cette propriété.
Il existe cependant des possibilités de passer outre cette restriction :
* http://css-discuss.incutio.com/?page=FixedLayouts
* http://css-discuss.incutio.com/?page=GhostInTheBox
====Exemples=
Un exemple qui les rassemble tous et qui vous permet éventuellement de les combiner....
exemple 1
====Attention au risque de confusion !!!=
On parlera souvent d'élément positionné dans ce wiki, cela implique un élément dont on connaît l'exacte emplacement dans la fenêtre.
Un élément en position:relative n'est pas un élément positionné, puisque son emplacement dépend du flux.
Par contre une élément en position: absolute est un élément positionné.
=== Liens Ressources=
* OpenWeb:articles/initiation flux -- A propos du flux et de la position relative. Par défaut, les navigateurs affichent les boîtes issues du document html dans l'ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.
=== Discussion =
|
En bref 
Cette page décrit la propriété CSS Position. Cette propriété permet de spécifier si un élément doit être positionné de façon relative ou absolue. Depuis CSS 2.0, il existe différentes propriétés de feuille de style pour positionner au pixel près les éléments d'une page Web.
La propriété 'position'
- Valeur : static | relative | absolute | fixed | inherit
- Initiale : static
- S'applique à : tous les éléments, sauf à un contenu généré
- Héritée : non
- Pourcentage : sans objet
- Médias : visuel
Les valeurs de cette propriété ont le sens suivant :
static
La boîte est normale, placée selon le flux normal. Les propriétés 'left' 'top' 'right' et 'bottom' ne s'y appliquent pas.
exemple
relative
L'emplacement de la boîte est calculé selon le flux normal (ce qu'on appelle la position dans le flux normal). Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l'emplacement de la boîte suivante est calculé comme si B n'avait pas été déplacée.
exemple
Dans cette exemple on peut très clairement voir que l'espace occupé par la boite déplacée est conservé, comme si celle-ci n'avait pas été déplacée. On peut aussi noter que la boite se déplace avec toutes ses propriétés par défaut tant que de nouvelles n'ont pas été spécifiées, ainsi celle-ci garde sa longueur initial (100% de la fenêtre moins 2X 5px de marges) et une partie de celle-ci disparaît donc à droite forçant un scroll horizontal.
absolute
L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. Celles-ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges celles-ci ne fusionnent pas avec d'autres marges.
exemple
Dans cet exemple le positionnement se fait en fonction du bloc conteneur <body> avec les propriétés top et left. La boite étant sortie du flux, les autre boites se positionnent comme si celle-ci n'existait pas.
On peut noter que lorsqu'un bloc est en positionnement absolue, cela implique un certain nombre de choses :
- Ses dimensions changent, si elle ne sont plus spécifiées elles prennent la valeur auto, définit en fonction du contenu.
- Dans l'ordre d'empilement des boites, celle-ci crée un nouveau niveau qui vient dessus les précédents niveaux.
fixed
L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte est en plus fixe par rapport à une référence donnée. Pour les médias continus, par rapport à la zone de visualisation (la boîte ne bouge pas lors d'un défilement). Pour les médias paginés, par rapport à la page, même si celle-ci apparaît dans une zone de visualisation (par exemple lors d'un aperçu avant impression).
exemple
Dans cet exemple, on observe que la boite se positionne avec la même logique que dans un positionnement absolu, la différence se faisant dans le fait que le bloc ne bougera pas lors du scroll.
Ce type de positionnement peut s'avérer très efficace pour des menu de navigation dans des pages longues.... mais reste sous-utilisé car InternetExplorer Windows ne sait pas interpréter cette propriété.
Il existe cependant des possibilités de passer outre cette restriction :
Exemples
Un exemple qui les rassemble tous et qui vous permet éventuellement de les combiner....
exemple 1
Attention au risque de confusion !!!
On parlera souvent d'élément positionné dans ce wiki, cela implique un élément dont on connaît l'exacte emplacement dans la fenêtre.
Un élément en position:relative n'est pas un élément positionné, puisque son emplacement dépend du flux.
Par contre une élément en position: absolute est un élément positionné.
Liens Ressources
- OpenWeb:articles/initiation flux -- A propos du flux et de la position relative. Par défaut, les navigateurs affichent les boîtes issues du document html dans l'ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.
Discussion
| 
