Maison > interface Web > tutoriel CSS > le corps du texte

Quels sont les attributs de positionnement en CSS

下次还敢
Libérer: 2024-04-26 13:39:20
original
962 Les gens l'ont consulté

La propriété de positionnement en CSS est utilisée pour contrôler la position d'un élément par rapport à son parent ou à d'autres éléments. Les principaux attributs de positionnement sont les suivants : statique : l'élément occupe une position dans le flux de documents normal. relatif : l'élément est décalé par rapport à sa position actuelle mais reste dans le flux documentaire. absolu : l'élément est supprimé du flux de documents et positionné par rapport à son élément parent le plus proche qui possède un attribut de positionnement. fixe : l'élément est fixe dans la fenêtre et positionné par rapport à la fenêtre du navigateur.

Quels sont les attributs de positionnement en CSS

Propriétés de positionnement en CSS

Les propriétés de positionnement sont des propriétés clés en CSS utilisées pour contrôler la position des éléments dans le document. Il est principalement utilisé pour déterminer la position d'un élément par rapport à son parent ou à d'autres éléments.

Différents types d'attributs de positionnement

Les principaux attributs de positionnement suivants sont fournis en CSS :

  • statique : L'élément occupe une position dans le flux normal du document et n'est pas affecté par les attributs de positionnement. Il s'agit de l'attribut de positionnement par défaut.
  • relatif : L'élément est décalé par rapport à sa position actuelle mais reste dans le flux documentaire.
  • absolu : l'élément est retiré du flux de documents et positionné par rapport à son élément parent le plus proche qui possède l'attribut position.
  • fixed : L'élément est fixe dans la fenêtre, positionné par rapport à la fenêtre du navigateur, et ne bouge pas même lorsque la page défile.

Exemple de positionnement

L'exemple de code suivant démontre l'utilisation de différentes propriétés de positionnement :

<code class="css">/* static定位 */
p {
  color: blue;
}

/* relative定位 */
div {
  position: relative;
  top: 20px;
  left: 50px;
}

/* absolute定位 */
span {
  position: absolute;
  top: 0;
  right: 0;
}

/* fixed定位 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}</code>
Copier après la connexion

Cela créera un paragraphe de texte bleu (positionnement statique), un décalage div de 20 px en haut et de 50 px à gauche par rapport à sa propre position ( positionnement relatif), une étendue positionnée par rapport au haut et à la droite de son élément parent (positionnement absolu) et une barre de navigation fixée en haut et à gauche de la page (positionnement fixe).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!