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

Accueil >
coder en css positionnement html

A découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

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:

La propriété de feuille de style position CSS est généralement utilisée pour la création de calques (Layer).
Valeurs possibles:

top
left
right
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 >>>]

Le CSS en 3 questions/réponses - en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.

🤔 Qu'est-ce que le CSS ?

CSS est l'acronyme de « Cascading Style Sheets » c'est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.