Positionner un élément en HTML5/CSS3

Positionner son texte en HTML5 et CSS3

Get Started. It's Free
or sign up with your email address
Rocket clouds
Positionner un élément en HTML5/CSS3 by Mind Map: Positionner un élément en HTML5/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

12.3. Détermine si l'élément est visible ou caché

12.4. Les éléments conservent leur position