La propriété position en CSS est utilisée pour définir la position d'un élément sur la page. Grâce à cette propriété, vous pouvez placer n'importe quel attribut là où vous le jugez approprié.
L'attribut position spécifie le type de positionnement de l'élément. Cet attribut définit le mécanisme de positionnement utilisé pour établir la disposition de l'élément. N'importe quel élément peut être positionné, mais les éléments absolus ou fixes génèrent une boîte au niveau du bloc, quel que soit le type de l'élément lui-même. Un élément positionné relativement est décalé par rapport à sa position par défaut dans un écoulement normal.
L'attribut position spécifie le type de méthode de positionnement appliquée à l'élément (statique, relative, fixe, absolue ou collante) :
Les éléments sont en fait positionnés à l'aide des attributs haut, bas, gauche et droite. Toutefois, ces propriétés n’ont aucun effet sauf si la propriété position est définie en premier. Ils fonctionnent différemment selon la valeur de la position.
1. Positionnement statique : statique
Les éléments HTML sont positionnés statiquement par défaut.
Les éléments positionnés statiquement ne sont pas affectés par les attributs haut, bas, gauche et droite.
Un élément avec position: static; n'est pas positionné de manière particulière, il est toujours positionné selon le flux normal de la page :
Exemple:
<!DOCTYPEhtml><html><head><style>div{hauteur:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;background-color:#CCC;line-height:50px;text -align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></div></body ></html>Résultats en cours d'exécution :
2. Positionnement relatif : relatif
Exemple:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}< /style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body></html>Résultats en cours d'exécution :
Si vous modifiez le fichier de style CSS dans le code comme suit :
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position : relatif;gauche:20px;haut:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div ></corps></html>Résultats en cours d'exécution :
Résumé : Relatif est un décalage par rapport à la position du flux de documents normal. La position initialement occupée existe toujours, ce qui signifie qu'elle n'affectera pas la position des éléments suivants. Gauche signifie décaler par rapport au côté droit de la position d'origine, et haut signifie décaler par rapport au bas de la position d'origine. Lorsque gauche et droite existent en même temps, seule la gauche est valide. Lorsque haut et bas existent en même temps, seul le haut est valide. Le décalage relatif est basé sur le côté supérieur gauche de la marge de l'objet.
3. Positionnement absolu : absolu
Exemple:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# contenu{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>Résultats en cours d'exécution :
Lors de la modification de fichiers de style CSS :
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position : absolu;left:20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>Résultats en cours d'exécution :
On peut voir que lorsque la valeur de l'attribut position de l'élément parent est la valeur par défaut (statique), l'absolu est positionné par rapport à la fenêtre du navigateur.
Si la valeur de l'attribut position de content est définie sur une valeur autre que celle par défaut, alors absolue est positionnée par rapport à l'élément parent :
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position : absolu;gauche:20px;top:20px;}#content{margin-left:100px;margin-top:100px;position:relative}</style></head><body><divid=content><divid=item1 >item1</div><divid=item2>item2</div></div></body></html>Résultats en cours d'exécution :
Continuez à modifier le style CSS :
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# contenu{margin-left:100px;margin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>Résultats en cours d'exécution :
Avez-vous remarqué le changement ? Lorsque le div externe est défini sur absolu, la largeur du div externe passe de 100 % à auto.
Lorsque vous définissez la propriété position d'un élément sur absolue ou fixe, trois choses se produisent :
(1) Déplacez l'élément d'un calque dans la direction de l'axe Z. L'élément est hors du flux ordinaire, il n'occupe donc plus l'espace du calque d'origine et couvrira les éléments du calque inférieur.
(2) L'élément deviendra un élément de niveau bloc, ce qui équivaut à définir display: block; pour l'élément (donnez un élément en ligne, tel que <span>, et après avoir défini absolu, vous constaterez qu'il peut définir le largeur et hauteur).
(3) Si l'élément est un élément de niveau bloc, la largeur de l'élément passe de la largeur d'origine : 100 % (occupe une ligne) à auto.
4. Positionnement fixe : fixe
Le positionnement fixe consiste à positionner l'élément par rapport à la fenêtre du navigateur. L'élément utilisant le positionnement fixe ne bougera pas en raison du défilement de la fenêtre du navigateur, comme s'il était fixe sur la page. Nous voyons souvent le bouton de retour en haut sur le Web. page. Ceci est réalisé en utilisant un positionnement fixe.
Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; hauteur:200px;largeur:200px;}</style></head><body><divclass=outstyle=position:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle =couleur de fond:rouge;position:fixe;gauche:20px;bas:10px;></div><divclass=instyle=background-color:bleu;></div></div></body></ html>Résultats en cours d'exécution :
5. Positionnement collant : collant
Le positionnement collant est différent des quatre méthodes de positionnement présentées précédemment. C'est comme une combinaison de positionnement relatif et de positionnement fixe lorsque la page défile, son effet est le même que lorsque l'élément défile dans une certaine mesure. apparaîtra à nouveau. Effet de positionnement fixe. Par exemple, le menu de navigation de certaines pages Web est dans sa position par défaut lorsque la page est chargée, et il est fixé en haut de la page lorsque nous faisons défiler vers le bas.
Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; hauteur : 200 px ; largeur : 250 px ;</style></head><body><divclass=out><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color : rouge;></div><divclass=instyle=background-color:blue;></div></div></body></html>Résultats en cours d'exécution :
