Agencement CSS - propriété position
- Page précédente max-width CSS
- Page suivante z-index CSS
position La propriété spécifie le type de méthode de localisation de l'élément (statique, relative, fixe, absolu ou collé).
propriété position
position Cette propriété détermine le type de méthode de positionnement appliquée à l'élément.
Il y a cinq valeurs de position différentes :
- static
- Les éléments collés se positionnent en fonction de la position de défilement de l'utilisateur sur le support relatif (
- ) et fixe (
- absolute
- sticky
Les éléments sont en réalité positionnés en utilisant les propriétés top, bottom, left et right. Cependant, ces propriétés ne fonctionnent pas tant que la propriété position n'est pas définie en premier. Leur fonctionnement diffère selon les valeurs de position.
position: static;
Les éléments HTML sont par défaut positionnés en static (statique).
Les éléments positionnés en static ne sont pas affectés par les propriétés top, bottom, left et right.
Les éléments positionnés en static ne sont pas positionnés de manière spéciale ; ils sont toujours positionnés suivant le flux normal de la page :
Ceci est le CSS utilisé :
Exemple
div.static {
position: static;
height: 100px;
z-index: -1;
position: relative;
position: relative; Les éléments sont positionnés par rapport à leur position normale.
La définition des propriétés top, right, bottom et left d'un élément positionné en relative le déplace de sa position normale pour l'ajuster. Le reste du contenu ne sera pas ajusté pour s'adapter à l'espace laissé par l'élément.
Ceci est le CSS utilisé :
Exemple
div.relative {
position: relative;
left: 30px;
height: 100px;
z-index: -1;
position: fixed;
position: fixed; Les éléments positionnés en viewport sont ceux qui restent toujours à la même position même si la page est défilée, car ils sont positionnés par rapport à la viewport. Les propriétés top, right, bottom et left sont utilisées pour positionner cet élément.
Les éléments positionnés en fixed ne laissent pas d'espace vide à l'endroit où ils devraient normalement être placés sur la page.
Veuillez noter cet élément fixe en bas à droite de la page. Voici le CSS utilisé :
Exemple
div.fixed {
position: fixed;
bottom: 0;
top: 80px;
width: 300px;
height: 100px;
z-index: -1;
img {
img { les éléments sont positionnés par rapport à l'élément ancestor positionné le plus proche (plutôt que par rapport à la viewport, comme pour fixed).
Cependant, si un élément positionné en absolu n'a pas d'ancêtres, il utilisera le corps du document (body) et se déplacera avec le défilement de la page.
Les éléments ayant une pile d'ordre supérieure sont toujours placés avant les éléments ayant une pile d'ordre inférieure.Les éléments "positionnés" sont ceux dont la position est static tous les autres éléments.
Voici un exemple simple :
Ceci est le CSS utilisé :
Exemple
div.relative {
position: relative;
width: 400px;
height: 200px;
height: 100px;
z-index: -1;
height: 200px;
img {
div.absolute {
top: 80px;
right: 0;
width: 200px;
height: 100px;
z-index: -1;
position: -webkit-sticky; /* Safari */
position: -webkit-sticky; /* Safari */ border: 3px solid #73AD21;
les éléments selon la position de défilement de l'utilisateur.Les éléments collés se positionnent en fonction de la position de défilement de l'utilisateur sur le support relatif (relative) et fixe (fixed
Les éléments ayant une pile d'ordre supérieure sont toujours placés avant les éléments ayant une pile d'ordre inférieure.) pour basculer entre elles. Au départ, il est positionné de manière relative, jusqu'à ce qu'il rencontre la position offset donnée dans la fenêtre de visualisation - puis il est 'collé' à la position appropriée (par exemple, position:fixed). topInternet Explorer, Edge 15 et les versions antérieures ne prennent pas en charge la position collée. Safari nécessite le préfixe -webkit- (voir l'exemple ci-dessous). Vous devez également spécifier au moinsrightInternet Explorer, Edge 15 et les versions antérieures ne prennent pas en charge la position collée. Safari nécessite le préfixe -webkit- (voir l'exemple ci-dessous). Vous devez également spécifier au moinsbottom , left ou
l'un des éléments, afin que la position collée fonctionne.Dans cet exemple, l'élément sticky reste en haut de la page lorsque l'utilisateur atteint sa position de défilement (top: 0
Exemple
)
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
z-index: -1;
border: 2px solid #4CAF50;
Éléments en surplomb
z-index Lorsque les éléments sont positionnés, ils peuvent chevaucher d'autres éléments.
La propriété spécifie l'ordre de pile de l'élément (quels éléments doivent être placés devant ou derrière d'autres éléments).
Les éléments peuvent avoir une pile d'ordre positive ou négative :
C'est un titre
Exemple
Comme le z-index de l'image est -1, elle se trouve derrière le texte.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
Essayez-le vous-même
Les éléments ayant une pile d'ordre supérieure sont toujours placés avant les éléments ayant une pile d'ordre inférieure.Attention : z-indexSi deux éléments positionnés se chevauchent sans être spécifiés
Positionner du texte dans l'image
Comment placer du texte sur une image :
Exemple
Essayez-le vous-même :
En haut à gauche En haut à droite En bas à gauche En bas à droite Centré
Plus d'exemples
- Définir la forme de l'élément
- Cet exemple montre comment définir la forme d'un élément. L'élément est découpé en cette forme et affiché.
Toutes les propriétés de positionnement CSS
| Propriété | Description |
|---|---|
| bottom | Définir la marge extérieure inférieure du cadre de positionnement. |
| clip | Couper les éléments de positionnement absolu. |
| left | Définir la marge extérieure gauche de la boîte de positionnement. |
| position | Définir le type de positionnement de l'élément. |
| right | Définir la marge extérieure droite de la boîte de positionnement. |
| top | Définir la marge extérieure supérieure de la boîte de positionnement. |
| z-index | Définir l'ordre d'empilement des éléments. |
Lecture supplémentaire
Livres de complément :Aperçu de la position CSS
Livres de complément :Position relative CSS
Livres de complément :Position absolute CSS
- Page précédente max-width CSS
- Page suivante z-index CSS
