Positionnement d'un bloc ou texte en CSS
Position : gauche, droite, statique

Positionnement

Propriété : Position

La propriété sert à définir la position des éléments dans une page HTML
Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien)
Syntaxe : position: valeur;
Valeurs possibles:

  1. static
  2. relative
  3. absolute
  4. fixed
La propriété de feuille de style position css est généralement utilisée pour la création de calques (Layer).
Valeurs possibles:
  1. top
  2. left
  3. right
  4. bottom
Exemple : position: absolute; top: 10px; right: 10px;

Le principe du positionnement en CSS fait qu'il est possible de positionner un block n'importe.

Un exemple avec un titre H2
Prenons un exemple avec un titre H2 à 50px du haut et 20px de la gauche de la page HTML, le code CSS pourrait est le suivant : h2 { position:absolute; top: 50px; left: 20px;}

Le positionnement absolu

Une balise HTML avec une position absolue ne laisse aucun espace vide après qu'il est positionné. On place une balise HTML en position absolue en fixant la valeur de la propriété position à "absolute". On peut alors utiliser les propriétés right, left, top et bottom pour placer la balise HTML.
Un exemple avec 4 div

#div_1 { position:absolute; top: 50px; left: 50px;}
#div_2 { position:absolute; top: 50px; right: 50px;}
#div_3 { position:absolute; bottom: 50px; right: 50px;}
#div_4 { position:absolute; bottom: 50px; left: 50px;}

Dans cette exemple, vous allez obtenir une div à chaque coin de votre écran.

Le positionnement relatif

On place une div en position relative en avec la valeur de la propriété : relative. La différence entre position absolue et position relative est à la façon dont la position est définie. Pour une div en position relative, elle est calculée d'après sa position originale dans la page.

En d'autres termes, si on déplace l'élément vers la droite, la gauche, le haut ou le bas. Ainsi, l'élément obtient toujours un espace dans la page après qu'il est positionné. Comme exemple de positionnement relatif, nous pouvons positionner trois images relativement à leur position originale dans la page. Remarquez les espaces vides laissés par elles à leurs positions originales dans le document :

#div1 { position:relative; left: 35px; bottom: 15px;}
#div2 { position:relative; left: 15px; bottom: 50px;}
#div3 { position:relative; left: 5px; bottom: 70px;}

Liens vers d'autres sujets sur le CSS : [Gestion des majuscules, lettre en capitale en CSS >>>]

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page https://www.cssdebutant.com/coder-en-css-positionnement-html.html Votes: 4.3 / 5 étoiles - 8 vote(s) et 10 commentaires