Positionnement en CSS - Tutoriel CSS

Le positionnement en CSS

Dans ce tutoriel, nous allons maintenant aborder la notion de positionnement en CSS.

Position

position: absolute;

Les valeurs possibles :

static : L'élément est positionné en fonction de son ordre d'écriture dans votre code HTML (Valeur par défaut)
absolute : L'élément est positionné par rapport aux bords de la page. Il défile avec la page.
fixed : L'élément est positionné par rapport aux bords de la page mais ne défile pas avec la page (Pas toujours compatbile avec tous les navigateurs)
relative : L'élément est positionné par rapport à l'élément précédent
inherit : Hérite de la propriété de son élément parent

Code CSS

.boite-position-absolue

      position:absolute; 

      left: 0px; /* Détermine la position par rapport au bord gauche de la page */

  top:300px; /* Détermine la position par rapport au bord haut de la page */

  width:190px;

  padding:5px;

  background-color:#FCF; 

}

Exemple

Tester ici

Spécifier si un élément est visible

visibility: hidden;

La propriété de visibility peut prendre ces différentes valeurs :

visible L'élément est visible (Valeur par défaut)
hidden L'élément est caché
collapse L'élément est invisible mais la place qu'il occupe est perdue. Ne s'applique qu'à certains éléments (Pas reconnu par internet explorer et opéra) égal à hidden;
inherit Hérite de son parent

Exemple avec visible

Le texte dans ce bloc de paragraphe est visible.

Cet exemple n'est pas ultime, puisque par défaut, votre code sera visible !

Code CSS

.paragraphe-visible

     visibility:visible;

    }

Exemple de tableau avec la cellule C1 en hidden

A	B	C	D
1	OK	Caché	OK
2	OK	OK	OK
3	OK	OK	OK

Code CSS

.cellule-cache

     visibility:hidden;

    }

Le chevauchement des éléments (Position sur la profondeur)

z-index:1;

La propriété de feuille de style css z-index permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur).

Les valeurs possibles :

auto Le bloc aura un "z-index" plus grand que le bloc précédent déclaré dans le code HTML (Valeur par défaut)
Nombre positif
inherit Hérite de son parent

Exemple

2 classes CSS placées sur des balises div, elles font toutes les deux 100 px de large, la div rose a un index-z à 1, elle est en dessous de la div bleue qui elle a un z-index à 2.

z-index1
.Rose

z-index2
.Bleue

Code CSS

.rose

      position:absolute; 

      left:10px;

      background-color:#FCF; 

      width:100px; 

      height:40px;

      z-index:1;

      } 
     
    .bleu

position:absolute; 

left:60px; /* le positionnement à gauche est différent */

background-color:#6CF; 

width:100px; 

height:40px; 

z-index:2; 

}

Gérer les dépassement de boîte (Rendre scrollable si le contenu est supérieur à la taille de la boîte)

overflow: auto;

Utile sur une boite qui a par exemple une hauteur définie.

Les valeurs possibles :

visible Le contenu en excés dans une boîte est affiché en dehors
hidden Le contenu en excés dans une boîte est caché
scroll Affiche une barre de défilement horizontale et verticale
auto Affiche une barre de défilement horizontale ou verticale si le contenu dépasse la taille de la boîte
inherit hérite de son parent

Exemple

Si le contenu texte de cette boîte dépasse, j'aurai automatiquement des barres scrollables horizontales et ou verticales. Si le contenu texte de cette boîte dépasse, j'aurai automatiquement des barres scrollables horizontales et ou verticales. Si le contenu texte de cette boîte dépasse, j'aurai automatiquement des barres scrollables horizontales et ou verticales.

Code CSS

.boite-scrollable-si-besoin

      background-color:#FCF;

  height:40px; 

  padding:5px;

  overflow:auto;

    }

Positionnement d'un élément HTML avec placement

left: 10px;

Les valeurs possibles :

left (A gauche)
right (A droite)
top (En haut)
bottom (En bas)

La taille peut être exprimée en

px, pt, in, cm, mm, pc, em, ex %

Exemple, mettez votre navigateur en plein écran et regardez les boîtes roses à gauche et à droite

Tester ici

Code CSS

.position-gauche-10 {

      position:absolute;

      left:10px;

      top:100px;

      width:100px;

      height:80px;

      z-index:3;

      background-color: #FFCCFF;

      }     
     .position-droite-10 {

      position:absolute;

      right: 10px;

      top: 100px;

            width:100px;

      height:80px;

      z-index:4;

      background-color: #FFCCFF;

Spécifier la zone visible d'un élément

clip: rect(0px, 200px, 100px, 0px);

Elle est généralement utilisée pour cacher une partie d'un élément.

Valeurs possibles :

auto s'adapte au contenu
rect(v1, v2, v3, v4) : v1 début de la zone visible verticale, v2 fin de la zone visible horizontale, v3 fin de la zone visible verticale, v4 début de la zone visible horizontale. L'unité "%" ne semble pas être acceptée
inherit Hérite de son parent

Exemple

Cliquer ici

Code CSS

.boite-clip{

background-color:#FF99FF;

width:200px;

height:200px;

clip: rect(0px, 200px, 100px, 0px);

position: absolute;

}