La position de propriété spécifie le type de méthode de positionnement utilisé pour un élément (statique, relative, fixe ou absolue).
La position de la propriété
La position de propriété spécifie le type de méthode de positionnement utilisé pour un élément.
Il y a quatre valeurs de position différentes:
-
static -
relative -
fixed -
absolute
Les éléments sont ensuite positionnés en utilisant le haut, en bas, à gauche, et bonnes propriétés. Cependant, ces propriétés ne fonctionnera pas à moins que la position de propriété est définie en premier. Ils fonctionnent également différemment en fonction de la valeur de position.
position: static;
Les éléments HTML sont positionnés statique par défaut.
éléments positionnés statiques ne sont pas affectés par le haut, en bas, à gauche, et bonnes propriétés.
Un élément avec position: static; est pas positionné de manière spéciale; il est toujours positionné en fonction du débit normal de la page:
Voici le CSS qui est utilisé:
position: relative;
Un élément de position: relative; est positionné par rapport à sa position normale.
Réglage du haut, à droite, en bas, et les propriétés de gauche d'un élément relativement positionné va l'amener à être ajustée de sa position normale. Autre contenu ne sera pas ajusté pour tenir dans tout vide laissé par l'élément.
Voici le CSS qui est utilisé:
Exemple
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
} Essayez - le vous - même » position: fixed;
Un élément avec position: fixed; est positionné par rapport à la fenêtre, ce qui signifie qu'il reste toujours à la même place , même si la page défile. Le haut, à droite, en bas, et les propriétés de gauche sont utilisés pour positionner l'élément.
Un élément fixe ne laisse pas une lacune dans la page où il aurait normalement été localisé.
Remarquez l'élément fixe dans le coin inférieur droit de la page. Voici le CSS qui est utilisé:
Exemple
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Essayez - le vous - même » position: absolute;
Un élément avec position: absolute; est positionné par rapport à l'ancêtre positionné le plus proche ( au lieu de positionné par rapport à la fenêtre, comme fixé).
Toutefois; si un élément positionné absolu n'a pas d'ancêtres positionnés, il utilise le corps du document, et se déplace le long de défilement des pages.
Note: Un "positioned" élément est celui dont la position est tout sauf static .
Voici un exemple simple:
Voici le CSS qui est utilisé:
Exemple
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Essayez - le vous - même » chevauchement Elements
Lorsque des éléments sont positionnés, ils peuvent se chevaucher d'autres éléments.
Le z-index propriété spécifie l'ordre d'empilement d'un élément (quel élément doit être placé devant ou derrière les autres).
Un élément peut avoir un ordre de pile positive ou négative:
Ceci est une rubrique
Parce que l'image a un z-index de -1, il sera placé derrière le texte.
Un élément avec plus d'ordre de la pile est toujours en face d'un élément avec un ordre de pile faible.
 | Remarque: Si deux éléments positionnés se chevauchent sans z-index spécifié, l'élément positionné dernier dans le code HTML sera affiché sur le dessus. |
|---|
Positionnement du texte dans une image
Comment positionner le texte sur une image:
Exemple
Essayez-le vous-même:
En haut à gauche » en haut à droite» En bas à gauche » En bas à droite» Centré »
Autres exemples
Définir la forme d'un élément
Cet exemple montre comment définir la forme d'un élément. L'élément est clipsé dans cette forme, et affichée.
Comment montrer débordement dans un élément en utilisant défilement
Cet exemple montre comment définir la propriété de débordement pour créer une barre de défilement lorsque le contenu d'un élément est trop grand pour tenir dans une zone spécifiée.
Comment configurer le navigateur pour gérer automatiquement le débordement
Cet exemple montre comment définir le navigateur pour gérer automatiquement le débordement.
Changer le curseur
Cet exemple montre comment modifier le curseur.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Toutes les propriétés CSS de positionnement
| Propriété | La description |
|---|---|
| bottom | Définit le bord de la marge inférieure pour une boîte positionnée |
| clip | Clips un élément absolument positionné |
| cursor | Indique le type de curseur à afficher |
| left | Définit le bord de la marge gauche pour une boîte positionnée |
| overflow | Indique ce qui se passe si le contenu déborde de la boîte d'un élément |
| overflow-x | Indique ce qu'il faut faire avec la gauche / droite de bords du contenu si elle déborde la zone de contenu de l'élément |
| overflow-y | Indique ce qu'il faut faire avec les bords supérieurs / inférieurs du contenu si elle déborde la zone de contenu de l'élément |
| position | Indique le type de positionnement d'un élément |
| right | Définit le bord de la marge droite pour une boîte positionnée |
| top | Définit le bord supérieur de la marge pour une boîte positionnée |
| z-index | Définit l'ordre d'empilement d'un élément |