Fondamentaux
Le Positionnement
Position Static
La position Static est l'état par défaut :
permet de positionner notre élément sur la page
Element 1
Element 2
Element 3
Position Relative
La position Relative :
permet de déplacer notre élément tout en conservant la dimension de son emplacement d'origine
permet de modifier son z-index afin de le mettre en avant ou en retrait
Exemple
Element 1
Element 2
Element 3
Demo
Element 1
Element 2
Element 3
Position Absolute
La position Absolute :
permet de positionner notre élément sans conserver l'espace de son emplacement d'origine.
permet de modifier son z-index afin de le mettre en avant ou en retrait
se positionne par rapport à son ancêtre en Relative le plus proche (si introuvable, l'élément se base sur le Body)
Exemple
Element 1
Demo
Element 1
Position Fixed
La position Fixed :
permet de positionner notre élément sans conserver la dimension de son emplacement d'origine.
permet de modifier son z-index afin de le mettre en avant ou en retrait
se positionne par rapport à l'écran et reste fixe lorsque l'on scrolle la page
Demo
Element 1
Element 2
Element 3
Position Sticky
La position Sticky :
permet de bloquer le scroll d'un élément en le passant un instant de l'état Relative à l'état Fixed
permet de modifier son z-index afin de le mettre en avant ou en retrait
Exemple
Element 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Element 2
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Demo
Element 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Element 2
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50