Positionner des éléments sur une page Web avec la propriété CSS Position

Mai 4, 2024

Avant les feuilles de style en cascade, vous étiez limité dans le contrôle que vous aviez sur la position des objets sur votre page Web. Vous pouvez utiliser le tableau HTML pour contrôler légèrement le positionnement, mais ce n'était pas très précis. Maintenant, avec CSS, vous pouvez avoir un contrôle précis sur la façon dont chaque élément est placé sur votre page Web.

Avant de pouvoir utiliser la propriété CSS position pour positionner des éléments sur votre page Web, nous devons discuter de la terminologie utilisée pour communiquer avec le navigateur Web. CSS prend en compte non seulement la largeur et la hauteur de votre page Web, mais également les dimensions du navigateur Web.

Largeur et hauteur du navigateur
Au début, vous pourriez penser que cela fait référence à la fenêtre de navigateur ouverte. Mais cela fait vraiment référence à l'ensemble du navigateur, y compris les commandes et les boutons.
Largeur et hauteur en direct
C'est le terme pour la zone d'affichage du navigateur. Il n'inclut pas les contrôles.
Largeur et hauteur du document
Il s'agit de toute la largeur et la hauteur de votre page Web. Si ces dimensions sont plus grandes que la largeur et la hauteur en direct, le navigateur affichera les barres de défilement selon les besoins.

Maintenant que vous connaissez les termes des limites dans lesquelles vous pouvez positionner les parties de votre page Web à l'aide de CSS, examinons les quatre valeurs de position.

Statique
C'est la valeur par défaut. Sauf si vous spécifiez le contraire pour un élément, le navigateur utilisera le positionnement statique. Tout comme cela sonne, avec le positionnement statique, vous ne pouvez pas repositionner des éléments sur la page Web. Alors, comment le navigateur détermine-t-il où placer chaque objet sur votre page Web? Il positionne chaque élément dans l'ordre de leur apparition dans votre code HTML. Si vous avez une image de logo, puis une salutation et ensuite l'avis de droit d'auteur dans votre code HTML, le navigateur les placera sur la page Web dans cet ordre. Vous ne pouvez pas déplacer la salutation au-dessus de l'image du logo.
Relatif
Le positionnement relatif fonctionne de la même manière que statique en ce que l'ordre des éléments dans le code HTML contrôle le flux des éléments sur la page. Cependant, vous pouvez utiliser le positionnement relatif pour contrôler la position d'un élément par rapport aux autres éléments de la page Web.
Absolu
Lorsque vous utilisez le positionnement absolu avec un élément, cela rendra cet élément indépendant du reste de la page Web. Parce que son placement n'est plus déterminé par l'ordre du HTML, vous devrez utiliser les coordonnées X et Y pour positionner l'élément.
Fixé
Cela fonctionne de la même manière que le positionnement absolu. Cependant, l'élément qui a un positionnement fixe ne défilera pas avec la page Web. C'est une fonctionnalité intéressante à utiliser pour un logo ou un menu que vous souhaitez garder visible lorsque la page défile vers le haut.

Instructions Vidéo: TUTO CSS - #10 Le positionnement d'éléments (Mai 2024).

Positionnement d'éléments sur une page Web avec la propriété Position CSS, HTML, CSS, propriété Position CSS, positionnement statique, positionnement relatif, positionnement absolu, positionnement fixe, comment positionner des éléments sur une page Web, utiliser CSS pour positionner des éléments sur une page Web

Article Précédent

Article Suivant

Articles Connexes

des ordinateurs

Spectrobes DS

Mai 2024

Spectrobes DS est un jeu de style RPG portable qui consiste à collecter et à combattre. Disney a fait cela, et les graphismes sont plutôt impressionnants. L'histoire de base est qu'un garçon et...

des ordinateurs

Bibliothèque iTunes / iTunes Store

Mai 2024

Une petite histoire Je n'ai pas de longue histoire aujourd'hui. J'ai un Shuffle vert et une carte iTunes Music Store verte. Toute ma collection de CD est téléchargée sur mon ordinateur portable et...