CSS Position
positionLa propriété est utilisée pour spécifier la méthode de positionnement d'un élément.
Les cinq valeurs courantes sont les suivantes :
| Valeur | Description | Ancre |
|---|---|---|
| static | Valeur par défaut. Les éléments sont disposés selon le flux normal du document et ne sont pas affectés par top/right/bottom/left. | Voir l'exemple |
| relative | Décalé par rapport à sa propre position d'origine, et ne quitte pas le flux du document. | Voir l'exemple |
| absolute | Positionné par rapport à l'élément ancêtre positionné le plus proche (sinon par rapport au body), et il quitte le flux du document. | Voir l'exemple |
| fixed | Positionné par rapport à la fenêtre du navigateur ; la position ne change pas lorsque l'on fait défiler la page. | Voir l'exemple |
| sticky | Avant de faire défiler jusqu'à la position spécifiée, il se comporte comme relative ; après cela, il se comporte comme fixed. | Voir l'exemple |
Les éléments peuvent êtretop、right、bottometleftAjustez la position avec ces propriétés, mais ces propriétés ne prennent effet que lorsqueposition(et que la valeur n'est passtatic) est définie.
Positionnement statique
La valeur par défaut des éléments HTML, c'est-à-dire aucun positionnement, suit le flux normal du document.
Les éléments positionnés de manière statique ne sont pas affectés par top, bottom, left, right.
Positionnement fixe
La position de l'élément est fixe par rapport à la fenêtre du navigateur.
Il ne bougera pas même si l'on fait défiler la fenêtre :
Remarque :Le positionnement fixe nécessite une déclaration !DOCTYPE pour être pris en charge dans IE7 et IE8.
Le positionnement fixe rend la position de l'élément indépendante du flux du document, de sorte qu'il n'occupe pas d'espace.
Les éléments en position fixe se superposent à d'autres éléments.
Positionnement relatif
Le positionnement d'un élément positionné de manière relative est relatif à sa position normale.
Exemple
Essayez-le vous-même »
Déplacer un élément positionné relativement ne modifie pas l'espace qu'il occupait initialement.
Les éléments positionnés relativement sont souvent utilisés comme blocs conteneurs pour les éléments positionnés de façon absolue.
Positionnement absolu
La position d'un élément positionné de façon absolue est relative à son élément parent positionné le plus proche. Si l'élément n'a pas de parent positionné, alors sa position est relative à <html>:
Le positionnement absolu rend la position de l'élément indépendante du flux du document, de sorte qu'il n'occupe pas d'espace.
Les éléments positionnés de façon absolue se superposent à d'autres éléments.
Positionnement sticky
La signification littérale anglaise de sticky est « stick » ou « adhere », donc on peut l'appeler positionnement sticky.
position: sticky;Position basée sur la position de défilement de l'utilisateur.
Les éléments positionnés en sticky dépendent du défilement de l'utilisateur, et basculent entre les positionsposition:relativeetposition:fixed.
Il se comporte exactement commeposition:relative;Et lorsque la page défile au-delà de la zone cible, son comportement est commeposition:fixed;, il sera fixé à la position cible.
Le positionnement de l'élément se comporte comme relative avant de franchir un seuil spécifique, et comme fixed après cela.
Ce seuil spécifique fait référence à l'un des top, right, bottom ou left. En d'autres termes, le positionnement sticky ne prend effet que lorsqu'un des quatre seuils top, right, bottom ou left est spécifié. Sinon, son comportement est le même que le positionnement relative.
Remarque :Internet Explorer, Edge 15 et les versions IE antérieures ne prennent pas en charge le positionnement sticky. Safari nécessite le préfixe -webkit- (voir l'exemple ci-dessous).
Exemple
Essayez-le vous-même »
Éléments qui se chevauchent
Le positionnement des éléments est indépendant du flux du document, ils peuvent donc recouvrir d'autres éléments de la page.
La propriété z-index spécifie l'ordre d'empilement d'un élément (quel élément doit être devant ou derrière).
Un élément peut avoir un ordre d'empilement positif ou négatif :
Les éléments avec un ordre d'empilement plus élevé sont toujours devant les éléments avec un ordre d'empilement inférieur.
Remarque :Si deux éléments positionnés se chevauchent et qu'aucun z-index n'est spécifié, l'élément positionné en dernier dans le code HTML sera affiché devant.
Plus d’exemples
Découpage de la forme de l'élément
Cet exemple montre comment définir la forme d'un élément. L'élément est découpé selon cette forme et affiché.
Cet exemple montre comment la propriété overflow crée une barre de défilement pour s'adapter lorsque le contenu d'un élément est trop grand pour la zone spécifiée.
Comment définir la gestion automatique du débordement dans le navigateur
Cet exemple montre comment configurer le navigateur pour gérer automatiquement le débordement.
Cet exemple montre comment changer le curseur.
Toutes les propriétés de positionnement CSS
Les nombres dans la colonne "CSS" indiquent quelle version de CSS (CSS1 ou CSS2) a défini la propriété.
| Propriété | Description | Valeur | CSS |
|---|---|---|---|
| bottom | Définit le décalage entre le bord inférieur de la marge d'un élément positionné et le bord inférieur de son bloc conteneur. | auto longueur % inherit |
2 |
| clip | Rogne un élément positionné de façon absolue | shape auto inherit |
2 |
| cursor | Affiche le curseur selon le type spécifié. | url auto crosshair default pointeur move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
| left | Définit le décalage entre le bord de la marge gauche d'un élément positionné et le bord gauche de son bloc contenant. | auto longueur % inherit |
2 |
| overflow |
Définit ce qui se passe lorsque le contenu d'un élément déborde de sa zone. | auto hidden scroll visible inherit |
2 |
| overflow-y |
Spécifie comment gérer le contenu qui déborde de la zone de contenu de l'élément au niveau des bords supérieur/inférieur | auto hidden scroll visible no-display no-content |
2 |
| overflow-x |
Spécifie comment gérer le contenu qui déborde de la zone de contenu de l'élément sur le bord droit/gauche. | auto hidden scroll visible no-display no-content |
2 |
| position | Spécifie le type de positionnement d'un élément. | absolute fixed relative static inherit |
2 |
| right | Définit le décalage entre le bord de marge droit d'un élément positionné et le bord droit de son bloc conteneur. | auto longueur % inherit |
2 |
| top | Définit le décalage entre le bord de marge supérieur d'un élément positionné et le bord supérieur de son bloc conteneur. | auto longueur % inherit |
2 |
| z-index | Définit l'ordre d'empilement d'un élément. |
nombre auto inherit |
2 |