Positionnement absolu et relatif

 

Exemple
Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux. Un élément positionné absolue ou relatif sort du flux et recouvre le flux.

C'est un moyen simple de produire des menus en cascade ou menus à coulisse, par exemple http://www.sarbacane.com/index.asp

Entrons dans le vif du Sujet

ne s'hérite pas CSS2 iemzchromeoperasafari
I Le troisième mécanisme de positionnement

 

Il existe trois mécanismes de positionnement de base en CSS :

  1. le flux normal
  2. la flottaison,
  3. et la position, par la propriété position.

Dans le flux normal, la position de la boîte d'un élément est déterminée par l'ordre d'apparition dans le code HTML. Leur espacement est alors ajusté avec le remplissage, les bordures et les marges.

Le CSS-P (P comme Position, inclu dans le CSS2) permettent de décaler un élément par sa propriété "position" associée aux attributs

  • left (ou rigth, décalage horizontal)
  • et top (ou bottom, décalage vertical)

II Positionnement relatif

Syntaxe CSS

L'élément "exemple1" sera décalé de 150 px horizontalement et de 20px verticalement par rapport à sa position dans le flux normal.
Exemple
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. "

II Positionnement absolu

Syntaxe CSS

Cette fois, le décalage n'est décompté à partir de la position dans le flux normal mais par rapport au dernier élément parent positionné (s'il n'y en a pas, c'est alors le coin haut gauche de la fenêtre (élément <body>))

Un élément déclaré "position: absolute" sort alors du flux. Il n'a alors plus aucun effet sur le calcul des placements des autres éléments du flux normal.

Exemple
 elt1                     
elt2             

III Positionnement fixe

Un élément avec position fixe est positionné par rapport à la fenêtre du navigateur. Il ne bougera pas même si la fenêtre défile (scroll). Cette technique rappelle la propriété background-attachment "fixed".

La seule différence entre "absolu" et fixe" est que, dans ce cas, le bloc conteneur de l'élément fixe n'est autre que la fenêtre d'affichage elle-même.

Le positionnement fixe permet ainsi de créer des éléments flottants qui restent toujours au même endroit dans la fenêtre. Cette technique permet de laisser de manière permanente à l'écran des éléments comme un formulaire de commentaire. Cette propriété pourra alors augmenter l'utilisabilité du site.

L'attribut css position: fixed n'est pas connus de tous les navigateurs (notamment les smartphones et IE6).

Exemple
                  voir l'exemple

IV Z-index ou la profondeur

La propriété z-index permet de changer l'ordre de superposition des éléments positionnés (par défaut, l'ordre d'écriture de code html). Plus son z-index sera grand, plus l'élément sera au-dessus des autres.

Exemple
z-index:3
z-index:2
z-index:1

Références :

  • http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm
  • http://www.nanoum.net/blog/6_absolue_et_fixe.html
  • http://devnull.tagsoup.com/fixed/
  • http://limpid.nl/lab/css/fixed/

 

Avez-vous atteint les objectifs ?
Vous devez :
  • bien distinguer les 3 modalités de positionnement : normale, flottante, positionnée
  • connaître des cas d'utilisation de ces 3 modalités
Testez-vous

Questions immédiates :

  1. On souhaite centrer horizontalement un bloc <div id="petit"> dans un bloc <div id="gros">


    Parmi ces déclarations css, choisir celles qui conviennent :
  2. Voir les effets a b c d