Comment utiliser le positionnement absolu pour la programmation HTML5 et CSS3 - les nuls

Commençons l'aventure du positionnement absolu en considérant le mécanisme de mise en page par défaut. Ici, vous pouvez voir une page HTML5 avec deux paragraphes dessus. Vous pouvez utiliser CSS pour donner une couleur différente à chaque paragraphe et définir une hauteur et une largeur spécifiques. Le positionnement est laissé au gestionnaire de disposition par défaut, qui positionne le deuxième paragraphe (noir) directement en dessous du premier (bleu).

Comment paramétrer le code HTML

Le code n'est pas surprenant:

cases. html #blueBox {background-color: bleu; largeur: 100px; height: 100px;} #blackBox {background-color: black; largeur: 100px; height: 100px;}

Si vous ne fournissez aucune autre indication, les paragraphes (comme les autres éléments de niveau bloc) ont tendance à fournir des retours chariot avant et après eux-mêmes, empilés les uns sur les autres. Les techniques de mise en page par défaut garantissent que rien ne se chevauche.

Comment ajouter des repères de position

Découvrez quelque chose de nouveau: Les paragraphes se chevauchent!

Cet exploit est accompli grâce à de nouveaux attributs CSS:

absPosition. html #blueBox {background-color: bleu; largeur: 100px; hauteur: 100px; position: absolue; gauche: 0px; en haut: 0px; margin: 0px;} #blackBox {background-color: noir; largeur: 100px; hauteur: 100px; position: absolue; à gauche: 50px; haut: 50px; marge: 0px;}

Alors, pourquoi vous souciez-vous si les boîtes se chevauchent? Bien, vous pourriez ne pas se soucier, mais la partie intéressante est ceci: Vous pouvez avoir un contrôle beaucoup plus précis sur où les éléments vivent et quelle taille ils sont. Vous pouvez même ignorer la tendance normale du navigateur à empêcher le chevauchement des éléments, ce qui vous donne des options intéressantes.

Comment faire un travail de positionnement absolu

Quelques nouvelles parties de CSS permettent ce contrôle plus direct de la taille et de la position de ces éléments. Voici le CSS pour l'une des boîtes:

#blueBox {background-color: blue; largeur: 100px; hauteur: 100px; position: absolue; gauche: 0px; en haut: 0px; margin: 0px;}

1. Définit l'attribut position sur absolute.

   Le positionnement absolu peut être utilisé pour déterminer exactement (plus ou moins) où l'élément sera placé à l'écran:

   position: absolue;
   

2. Spécifiez une position gauche dans le CSS.

   Après avoir déterminé qu'un élément aura une position absolue, il est retiré du flux normal, vous êtes donc obligé de fixer sa position. L'attribut left détermine où ira le bord gauche de l'élément. Cela peut être spécifié avec n'importe laquelle des unités de mesure, mais il est généralement mesuré en pixels:

   à gauche: 0px;
   

3. Spécifiez une position supérieure avec CSS.

   L'attribut indique où ira le haut de l'élément. Encore une fois, cela est habituellement spécifié en pixels:

   en haut: 0px;
   

4. Utilisez les attributs height et width pour déterminer la taille.

   Normalement, lorsque vous spécifiez une position, vous voulez également déterminer la taille:

   width: 100px; hauteur: 100px;
   

5. Définissez les marges sur 0.

   Lorsque vous utilisez le positionnement absolu, vous exercez un certain contrôle. Étant donné que les navigateurs ne traitent pas les marges de manière identique, il est préférable de définir les marges sur 0 et de contrôler manuellement l'espacement entre les éléments: marge

   : 0px;
   

Généralement, vous utilisez le positionnement absolu uniquement sur les éléments nommés, plutôt que sur les classes ou les types d'éléments généraux. Par exemple, vous ne voulez pas que tous les paragraphes d'une page aient la même taille et la même position, ou vous ne pouvez pas tous les voir. Le positionnement absolu fonctionne sur un seul élément à la fois.