Les positionnements en CSS - Cours CSS
| Nom du cours: | Les positionnements en CSS |
| Auteur: | Guillaume |
| Catégorie: |
Posté dans la catégorie CSS |
| Commentaire(s): |
suite... | 0 commentaire |
Le cours CSS
En CSS, il existe trois types de positionnements...
- Le positionnement absolu, permet de positionner un block n'importe ou sur la page.
- Le positionnement relatif, permet de déplacer un block par rapport à sa position normale.
- Le positionnement fixe, permet de déplacer un block n'importe ou sur la page en restant toujours visible
Dans votre page CSS, ces positionnements s'écrivent:
- Absolute pour le positionnement absolu
- Relative pour le positionnement relatif
- Fixed pour le positionnement fixe
Pour positionner un block il faut préciser des dimensions (vers la droite, gauche, haut etc...)
Par exemple, pour placer le block tout en haut de la page:
position: absolute;
left: 0;
top: 0; Le block sera donc à 0 pixel en partant de gauche et à 0 pixel du haut, il sera par conséquent affiché en haut à gauche du site...
Le positionnement Fixe
Il est pareil que l'absolu, sauf qu'avec un fixe, même en descandant la scrollbar le block reste toujours visible. par exemple essayez:
position: fixed;
left: 58px;
top: 70px; Vous pouvez donc voir que votre block reste sur votre page et est fixe...
Attention, Internet Explorer ne reconnait pas toutes ces fontions, différents bugs peuvent apparaître lors de l'affichage avec IE
Le positionnement relatif
Grâce à la position relative, vous allez pouvoir déplacer par exemple, un texte vers 80 pixels de gauche et 70 de hauteurs, un petit exemple:
position: relative
right: 60px;
bottom: 100px; Le texte se décale donc par rapport à sa position initiale
|
Accueil
Statut
