Position, dimensions, visibilité, overflow, display, float

propriétés gérées:
height, width, min-height, max-height, min-width, max-width, box-sizing, display, float, clear, clip, overflow, visibility, opacity, position [bottom, left, right, top], z-index

Position

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' n'ont pas d'effet ;
  • relative L'emplacement de la boîte est est déplacé relativement à cette position dans le flux normal.
  • absolute L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. 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é.
  • fixed L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte ne bouge pas lors d'un défilement).

Positions 'left', 'top', 'right' et 'bottom'

Les valeurs sont des longueurs donnant le positionnement de la boîte.

z-index

Niveau d'empilement d'une boîte positionnée :
nombre entier : la boîte de niveau n est placée devant la boîte de niveau (n-1) ;
auto : la boîte a le même empilement que son parent.

Dimensions

Les valeurs sont des longueurs : hauteur et largeur de boîte, dimensions mini et maxi.

Saisie des valeurs de position et dimension :

  • Chaque valeur est une longueur ou un pourcentage. Si vous entrez un nombre (entier ou avec virgule), l'unité de longueur par défaut est px.
  • Les unités possibles sont : px = nombre de pixels (unité par défaut), % = pourcentage, cm = centimètre, mm = millimètre, pt = point, em = valeur de font-size, ex = valeur de x-height, in = inch, pc = pica.
  • Une case vide signifie «pas de valeur», une case contenant «0» veut dire propriété à zéro.

box-sizing

La propriété box-sizing permet de déterminer comment les propriétés width et height sont interprétées.

  • content-box (ou "défaut") : valeur par défaut spécifiée dans le standard CSS. Les propriétés width et height sont mesurées en incluant le contenu, sans la bordure, mi les marges extérieure ou intérieure.
  • padding-box : les propriétés width et height incluent la marge intérieure, sans la bordure et la marge extérieure.
  • border-box : les propriétés width et height incluent la marge intérieure et la bordure, mais pas la marge extérieure.
  • inherit : hérite la valeur de l'élément parent.

opacity

Opacité alpha du sélecteur : la transparence affecte à la fois la couleur de fond et la couleur de premier plan.
Préférer une couleur RGBA qui n'a pas cet inconvénient et permet de définir une transparence différente pour le fond et le premier plan (non supporté par Internet Explorer).

overflow (débordement)

Cette propriété spécifie comment est géré le débordement d'un élément dont la taille excède celle de la boîte de texte. Les valeurs possibles sont :
  • visible : L'élément peut déborder hors de la boîte ;
  • hidden : le contenu est tronqué à la taille de la boîte ;
  • scroll (et auto) : la boîte garde la même taille mais est munie d'une barre de défilement permettant de visualiser tout le contenu.
    N.B. : Très intéressant pour créer un bloc défilant à l'instar d'un <iframe>, mais en CSS2.

display

Les valeurs de cette propriété ont le sens suivant (W3C dixit : pourquoi des choses aussi compliquées ?) :

  • block génère une boîte de bloc principale ;
  • inline génère une ou plusieurs boîtes en-ligne ;
  • list-item génère une boîte de bloc principale et une boîte en-ligne pour un item de liste ;
  • marker le contenu généré est un marqueur ;
  • none aucune boîte n'est générée (invisible par conséquent) ;
  • run-in et compact crée une boîte de bloc ou en-ligne ;
  • table donne à un élément le comportement d'une table.

Effacer réinitialiser les réglages de styles

Cliquez ce bouton pour effacer les réglages présents.

visibility

Les valeurs de cette propriété ont le sens suivant : visible La boîte est visible ; hidden La boîte est cachée mais occupe toujours le même espace.

float

Cette propriété spécifie le flottement d'une boîte à gauche, à droite ou pas du tout.

boîte en z-index=3

clip

Rectangle formant la partie visible de la boîte : ce qui est à l'extérieur est caché.
La propriété s'applique aux éléments dont la propriété overflow est autre que visible.

dialogue de saisie du rectangle d'un clip