Positionner un élément en HTML5/CSS3
Positionner son texte en HTML5 et CSS3
1. L'auteur : Olivier Legrand
1.1. Formateur du Web
1.2. Olivier Legrand - Concepteur pédagogique multimédia
2. Statique
2.1. position: static;
2.2. Position normal de l'élément
3. Relatif
3.1. position: relative;
3.1.1. left: valeur ou %
3.1.2. top; valeur ou %
3.1.3. right; valeur ou %
3.1.4. bottom; valeur ou %
3.1.5. Exemple
4. Absolu
4.1. position: absolute;
4.1.1. left: valeur ou %
4.1.2. top; valeur ou %
4.1.3. right; valeur ou %
4.1.4. bottom; valeur ou %
4.1.5. Exemple
4.2. L'élément devient indépendant du reste du document
5. Fixe
5.1. position: fixed;
5.1.1. left: valeur ou %
5.1.2. top; valeur ou %
5.1.3. right; valeur ou %
5.1.4. bottom; valeur ou %
5.1.5. Exemple
5.2. L'élément devient indépendant du reste du document
6. Flottement
6.1. float:
6.1.1. left:
6.1.2. right;
6.1.3. none;
6.2. Retire un élément de la boite de flux
6.3. Permet de placer l'élément a gauche ou a droite
7. Dégagement
7.1. clear
7.1.1. left:
7.1.1.1. annule le flottement de gauche
7.1.2. right;
7.1.2.1. annule le flottement de droite
7.1.3. both;
7.1.3.1. annule le flottement des deux cotés
7.1.4. none;
7.1.4.1. annule toute propriété de flottement
7.2. Clear annule le flottement de la propriété de float
8. Superposition
8.1. z-index
8.1.1. z-index: 1
8.1.2. z-index: 2
8.1.3. z-index: 3
8.2. Les éléments au-dessus ou en dessous des autres
8.3. Exemple
8.3.1. CSS
8.3.2. HTML
9. Dépassement
9.1. overflow
9.1.1. hidden
9.1.1.1. La partie qui dépasse est cachée
9.1.2. scroll
9.1.2.1. la partie qui dépasse est cachée
9.1.2.2. La partie est accessible par une barre
9.1.3. visible
9.1.3.1. La partie qui dépasse est affichée
9.1.4. auto
9.1.4.1. La main est rendue au navigateur
9.2. Exemple
9.2.1. HTML
9.2.2. CSS
10. Découpage
10.1. clip
10.1.1. rect(sup_gauche sup_droit inf_droit inf_gauche)
10.2. Exemple
10.2.1. HTML
10.2.2. CSS
10.3. Clip détermine la partie visible de l'image
11. Affichage
11.1. display
11.1.1. block
11.1.2. inline
11.1.3. none
11.2. Contrôle l'affichage des éléments de la page
11.3. Exemple
11.3.1. CSS
11.3.2. HTML
11.3.3. display: none;
11.3.3.1. l'élément est retiré de la page
12. Visibilité
12.1. visibility
12.1.1. visible
12.1.1.1. affiche l'élément
12.1.2. hidden
12.1.2.1. cache l'élément
12.2. Exemple
12.2.1. CSS