La propriété position

La propriété position peut prendre trois valeurs :

• static (valeur par défaut)
• relative
• absolute
• fixed

position:static

C'est la position par défaut d'un élément. Il s'affiche dans le flux : les éléments s'affiche dans leur ordre d'apparition dans le code selon la règle d'affichage des éléments incorporés et des éléments de bloc.

position:relative

Un élément en position relative, reste dans le flux, à la différence qu'il peut être décalé de sa position par défaut grace aux propriétés top ou bottom et  left ou right.

• lorsque la propriété left est définie, la propriété right est ignorée
• left > 0 décalage vers la droite
• left < 0 décalage vers la gauche 
• right > 0 décalage vers la gauche (si left n'est pas défini)
• right < 0 décalage vers la droite (si left n'est pas défini)
• lorsque le propriété top est définie la propriété bottom est ignorée
• top > 0 décalage vers le bas
• top < 0 décalage vers lle haut
• bottom > 0 décalage vers le haut (si top n'est pas défini)
• bottom < 0 décalage vers le bas (si left n'est pas défini)

Pour un élément incorporé

Pour un élément de bloc

• Lorsque les valeurs des propriétés top et left ne sont pas précisées, elle prennent une valeur nulle par défaut et l'élément est positionné comme si il était en position static
• Lorsqu'un élément en position relative est décalé grâce aux propriétés top et left, les éléments suivants ne subissent aucun décalage (contrairement à la propriété margin)

position:absolute

Un élément en position absolue est extrait du flux. En conséquence les autres éléments dans le flux se positionnent comme si l'élément absolu n'existait pas.

L'élément en position absolue est positionné selon les règles suivantes :

• par défaut si les propriétés top, right, bottom, et left ne sont pas définies l'élément se positionne comme si il était static, mais les élément suivant se positionnent comme si l'élément était absent.
• les valeurs de top, right, bottom et left déterminent la position de l'élément par rapport aux limites du  plus proche ancêtre qui n'est pas en position "static" ("absolute", "relative" ou "fixed"). A défaut l'ancêtre ultime est l'élément "body".

• si les propriétés top et height sont définies alors la propriété bottom est ignorée
• si propriétés left et width sont définis alors la propriété right est ignorée

La propriété position n'est pas héritée

La propriété z-index

La propriété z-index ne s'applique qu'aux éléments en position absolue. 

La propriété z-index détermine l'ordre de supperposition des éléments en position absolue qui se chevauchent.

La valeur de la propriété z-index est en entier positif.

• un élément en position absolue se supperpose à tout élément dans le flux
• un élément en position absolue se supperpose à une autre élément en postion absolue si sa propriété z-index est la plus élevée
• si deux éléments en position absolue au sein d'un même ancêtre absolu ont un même z-index, alors c'est le dernier apparu dans le code qui se supperpose au premier apparu
• un élément en position absolue se supperpose à son ancêtre absolu quels que soient leur z-index

La propriété z-index n'est pas héritée

Les propriétés top, right bottom et left

Elle ne jouent un rôle que pour les éléments en postion relative ou absolue (voir ci-dessus)

Elles peuvent prendre une valeur :

• un nombre de px
• un nombre d'em (proportionel à la taille de la police de l'élément)
• un  % défini par rapport aux dimensions de l'ancêtre en position absolue
• la valeur auto (c'est le navigateur qui détermine la valeur ad'hoc)

position:fixed

Un élément en position fixed est extrait du flux. En conséquence les autres éléments dans le flux se positionnent comme si l'élément absolu n'existait pas.

les éléments en position fixed se positionnent selon des règles semblables ˆ celles utilisées pour éléments en position absolue :

• par défaut si les propriétés top, right, bottom, et left ne sont pas définies l'élément se positionne comme si il était static, mais les élément suivants se positionnent comme si l'élément était absent.
• les valeurs de top, right, bottom et left détermine la position de l'élément par rapport aux limites de l'élément body.
• un élément en position fixed reste fixé même mme lors d'un défilement ˆ l'aide de l'ascenseur, pour un mŽdia visuel
• pour un mŽdia paginé les éléments en position fixed apparaisse sur chaque page au mê endroit

Les éléments flottants

la propriété float

La propriété float peut prendre 3 valeurs :

• left
• right
• none

Un élément en position flottante (float:left ou float:right) est extrait du flux.

float pour les éléments incorporés

• les éléments incorporés en position flottante sont extraits du flux et positionnés sur une nouvelle ligne s'empilant les uns derrière les autres, à gauche pour les éléments flottant à gauche et à droite pour les éléments flottant à droite.
• le reste du contenu contourne les éléments flottants
• un élément incorporé flottant peut avoir une largeur et une hauteur comme un élément de bloc.
• les mêmes règle s'appliquent à tout niveau d'imbrication

float pour les éléments éléments de bloc

• les blocs flottants sont extaits du flux, en conséquences les élément non flottant se positionnent comme si les éléments flottants n'existaient pas
• le contenu des éléments non flottants contournent les éléments flottants
• le premier élément flottant se positionne horizontalement à gauche ou à droite selon la valeur left ou right et à la position verticale qu'il aurait occupé si il était resté dans le flux
• les blocs flottants consécutifs s'empilent de gauche à droite ou de droite à gauche selon lapropriété left ou right
• la largeur d'un bloc flottant est réduite à son contenu si elle n'est pas spécifiée

La propriété float n'est pas héritée

voir également marges des éléments flottants

la propriété clear

• la propriété clear permet à un élément de cesser le contounement des éléments flottants
• il se positionne alors sous les éléments flottants précédents comme si ces derniers étaient restés dans le flux
• clear:left cesse le contournement des blocs flottants à gauche
• clear:right cesse le contournement des blocs flottants à droite
• clear:both cesse le contournement des blocs flottants à gauche ou à droite

La propriété clear n'est pas héritée

La propriété visibility

La propriété visibility permet de rendre un élément invisible. Elle peut prendre les valeur :

• visible (valeur par défaut)
• hidden 
• collapse (pour les lignes ou cellules de tableau)

• un élément dont la propriété visibility vaut "hidden" n'est pas visible mais continue d'occuper l'espace qu'il occuperait si il était resté visible (contrairement à display:none;)
• ses dimensions et ses marges sont prises en compte pour déterminer l'espace occupé.

• la propriété visibility:collapse appliquée à une ligne de tableau permet de la faire disparaître en compactant le tableau de sorte que la ligne n'occupe plus d'espace
• dans tout autre cas, collapse se comporte comme la valeur hidden

La propriété visibility n'est pas héritée

La propriété display

La propriété display n'est que partiellement implémentée par les navigateurs.

Les valeurs de la propriété display

display:none

L'élément est extrait du flux et n'est plus visible. Yout se passe comme si l'élément n'existait pas

inline

Confère à un élément les caractéristiques d'un élément incorporé

block

Confère à un élément les caractéristiques d'un élémentde bloc

inline-bloc 

Confère à un élément la caractérsitique d'un élément-incorporé (pas dans saut de ligne) mais doté des propriétés d'un bloc (dimensions, marges) 

inline-bloc bien que pouvant s'avérer fort utile, n'est pas largement implémenté (Safari 2+, Opra 9+, Konqueror 3.5+).  Lire l'article : http://covertprestige.info/test/40-display-inline-block.html

list-item

Confère à un élément les caractéristiques d'un élément de liste auquel on pourra appliquer les propriétés de listes (list-style-type, list-style-position, list-style-imge) :

run-in (sur Opera)

Le rendu d'un élément run-in dépend de la nature "incorporée" ou "bloc" de son successeur.

• si le successeur de l'élément run-in est un élément de bloc, l'élément run-in se comporte comme un élément en ligne et s'insère en début du contenu de son successeur
• si le successeur de l'élément run-in est un élément incorporé, alors l'élément run-in se comporte comme un élément de bloc

compact

La valeur compact joue un rôle similire à run-in

marker

Cette valeur ne s'applique qu'aux pseudo-éléments :before et :after. Interprété comme la valeur inline selon les navigateurs.

inline-block ( Safari, Opéra, Firefox 3)

Confère à l'élément les caractéristiques :

• d'un élément incorporé (pas de saut à la ligne)
• d'un élément de bloc (largeur hauteur marges)

valeur de tableau (non implémentées dans IE)

• table
• inline-table
• table-row-group
• table-column-group
• table-header-group
• table-footer-group
• table-row
• table-column
• table-row
• table-cell
• table-caption

Confère à  l'élément les caractéristiques de l'élément de tableau correspondant. 

• la propriété "table-cell" permet à l'élément de se comporter comme une cellule de tableau, donc de pouvoir utiliser la propriété "vertival-align" pour un alignement vertical
• la propriété "table" permet à l'élément de reconnaitre les propriétés propres aux éléments "table" (border-collapse, border-spacing, empty-cells, caption-side, table-layout)
• ces propiétés permettent de générer des tables à partir d'une arborescence xml qui s'y prette

http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html#utilisation

http://www.yoyodesign.org/doc/w3c/css2/visuren.html#display-prop

La propriété display est héritée

Overflow

La proprété overflow permet de gérer le comportement d'un élément lorsque ses dimensions ne permettent pas l'affichage de l'intégralité de son contenu. Ce peut être le cas lorque les dimensions de l'élement sont contraintes par des propriétés CSS. La capacité d'un conteneur peut également varier en fonction des dimensions de la fenêtre.

overflow:visible

• lorsque la propriété overflow d'un élément vaut "visible", en cas de dépassement de sa capacité, son contenu déborde. 
• overflow:visible 'est la valeur par défaut
• le débordement n'est pas pris en compte pour le positionnement des éléments suivants, seul les dimensions et marges de l'élément interviennent, ce qui peut provoquer le chevauchement d'éléments consécutifs

hidden

• lorsque la propriété overflow d'un élément vaut "hidden", en cas de dépassement de sa capacité la partie qui dépasse n'est pas visible et est en conséquence inaccessible.

scroll

• lorsque la propriété overflow d'un élément vaut "scroll", ce dernier affiche un ascenseur vertical et un ascenseur horizontal pour pouvoir accéder à la totalité du contenu
• le ascenseurs sont présents même lorsque le contenu ne déborde pas

auto

• lorsque la propriété overflow d'un élément vaut "scroll", en cas de débordement, ce dernier affiche un ascenseur vertical et un ascenseur horizontal pour pouvoir accéder à la totalité du contenu
• contrairement à la overflow:scroll, les ascenseurs ne sont présents qu'en cas de débordement et dans la seule dimension du débordement

Lla propriété overflow n'est pas héritée

La propriété clip

Cette propriété ne concerne que les éléments en position absolue. Elle permet de n'afficher qu'une partie du contenu.

La propriété clip prend une valeur de la forme : rect(top, right, bootom, left) avec top, right, bottom et left qui sont des valeurs numériques positives exprimées en px, em ou %

La propriété clip n'est pas héritée

1

2

Liens

LaboCSS

Spécification CSS2

Validation W3C

Tests de conformité CSS2

Support CSS des Navigateurs

W3schools

Webelix

HTML dog

CSS Hack

CSS zen garden

Tutoriaux

Aidenet

Outils en ligne