La position des éléments HTML joue un rôle essentiel dans l'organisation des composants de la page Web. Plus précisément, la position des éléments peut être ajustée en utilisant le CSS ' positionner ' la propriété. Cette propriété peut être associée à des propriétés de décalage, telles que les propriétés haut, gauche, droite et bas, fournissant des valeurs spécifiques pour ajuster l'élément sur la page. Cependant, le ' absolu ” les éléments positionnés peuvent être ajustés par rapport à l'élément positionné le plus proche.
Cet article expliquera le positionnement absolu CSS.
Propriété CSS 'position'
Le ' positionner ' La propriété CSS peut être utilisée pour ajuster la position de l'élément. Différentes valeurs de la propriété position sont fixes, absolues, relatives, statiques et persistantes. Ces valeurs sont définies avec les propriétés de décalage, telles que haut, droite, gauche et bas, pour ajuster la position de l'élément.
Comment appliquer le positionnement absolu CSS ?
Le positionnement absolu de l'élément peut être appliqué à l'aide du CSS ' positionner « propriété avec la valeur » absolu ”. L'élément avec la position absolue est ajusté en fonction de son élément parent positionné le plus proche. Mais si l'ancêtre n'est pas positionné, il s'ajustera par rapport à la section corps du document.
Exemple
Comprenons le concept avec un exemple pratique.
Étape 1 : créer un fichier HTML
Dans le fichier HTML, dans l'élément body, ajoutez un div avec le nom de classe ' principale ”. Ensuite, à l'intérieur du div créé, ajoutez une balise HTML associée aux attributs suivants :
-
- ' src ” fournit un lien vers l'image.
- ' classe ” est utilisé dans le CSS pour styliser les éléments.
- ' tout ” L'attribut spécifie le texte qui s'affiche à la place de l'image si l'image ne se charge pas sur la page.
- ' tout ” L'attribut spécifie le texte qui s'affiche sur la page à la place de l'image si l'image ne se charge pas sur la page.
Ensuite, ajoutez un autre div contenant le titre et les éléments h1 et p du paragraphe :
< div classe = 'principale' >< div classe = 'teneur' >
< image src = 'images/linuxlogo.png' classe = 'domicile' tout = 'Logo Linux' largeur = '80px' >
< h1 > Le positionnement absolu CSS h1 >
< p > Bonjour l'équipe Linuxhint ! p >
div >
div >
En CSS, plusieurs propriétés de style sont utilisées pour décorer les éléments HTML.
Étape 2 : stylisez « tous » les éléments
* {famille de polices : Verdana, Genève, Tahoma, sans empattement ;
}
Les éléments HTML sont stylés en utilisant le ' famille de polices « propriété avec la valeur » Verdana, Genève, Tahoma, sans empattement ”. Cette liste de valeurs garantit que si le navigateur ne prend pas en charge le premier style, l'autre sera appliqué.
Étape 3 : Style de la div 'maison'
.domicile {position : absolue ;
haut : 50px ;
gauche : 45px ;
}
Vous trouverez ci-dessous les propriétés appliquées au ' domicile ” div :
-
- ' positionner ” La propriété définit la position de l'élément. Ici, le ' absolu ” placera l'élément par rapport à la section body du HTML.
- ' Haut ” est utilisée pour le réglage vertical de l'élément.
- ' gauche ” La propriété est utilisée pour l'ajustement horizontal de l'élément.
Étape 4 : styliser la div « contenu »
.teneur {couleur de fond : bleu cadet ;
largeur : 300 pixels ;
hauteur : 250px ;
rembourrage à gauche : 40 px ;
marge gauche : 80px ;
}
Vous trouverez ci-dessous les propriétés CSS qui sont appliquées au ' teneur ” div :
-
- ' Couleur de l'arrière plan ” définit la couleur d'arrière-plan de l'élément.
- ' largeur ” La propriété définit la largeur de l'élément.
- ' la taille ” La propriété définit la hauteur de l'élément.
- ' rembourrage gauche ” est définie pour ajouter de l'espace sur le côté gauche du contenu de l'élément.
- ' marge-gauche ” propriété spécifie l'espace sur le côté gauche de l'élément.
À ce stade, notre page Web ressemblera à ceci :
On peut voir à partir du résultat ci-dessus que l'image de la maison div est placée à 50 pixels du haut et à 45 pixels de la gauche du corps du document. De plus, la position de la div home est définie par rapport à la section body du HTML.
Comment ajuster la position de l'élément « relative » à l'élément parent positionné ?
Cette section vous guidera pour ajuster la position de l'élément par rapport à l'élément parent de position le plus proche.
Définir la propriété 'position' de la div 'contenu'
position : relative ;
Pour ajuster la position de l'élément par rapport à l'élément parent, définissez le ' positionner ' propriété de l'élément parent à ' relatif ' évaluer.
Définir la propriété 'position' de l'élément 'img'
.domicile {position : absolue ;
haut : 100px ;
gauche : 220px ;
}
Ici:
-
- ' positionner ” propriété avec la valeur définie comme “ absolu ” sera positionné par rapport à l'élément parent (c'est-à-dire que la position de la div du contenu est définie avec la valeur relative).
- ' Haut ” La propriété est utilisée pour définir la position de l'élément à partir du haut.
- ' gauche ” La propriété est utilisée pour définir la position de l'élément à partir de la gauche.
Production
On peut voir d'après le résultat que l'image a été positionnée par rapport à sa div parente, et elle semble appropriée.
Conclusion
Le SSC ' positionner ” La propriété est utilisée pour définir la position des éléments HTML. Cette propriété peut être évaluée comme fixe, relative, absolue, collante et statique. Le ' absolu ” positionnera l'élément correspondant à son élément parent positionné à proximité. Cet article a expliqué le positionnement absolu CSS avec un exemple pratique.