Maison > interface Web > tutoriel CSS > En quoi « position : absolue » et « position : fixe » diffèrent-elles dans le positionnement HTML/CSS ?

En quoi « position : absolue » et « position : fixe » diffèrent-elles dans le positionnement HTML/CSS ?

Susan Sarandon
Libérer: 2024-11-29 05:30:09
original
154 Les gens l'ont consulté

How Do `position: absolute` and `position: fixed` Differ in HTML/CSS Positioning?

Positionnement des éléments fixes par rapport au parent ou à la fenêtre

En HTML et CSS, il existe deux manières principales de positionner des éléments : par rapport au parent ou par rapport à la fenêtre.

Élément de positionnement fixe par rapport à Parent

Pour positionner un élément fixe par rapport à l'élément parent, utilisez la propriété CSS suivante :

position: absolute;
Copier après la connexion

Lorsqu'un élément est positionné de manière absolue, sa position est déterminée par rapport à l'élément parent. contenant immédiatement l'élément parent. Par exemple :

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 50px;
  top: 20px;
}
Copier après la connexion

Dans cet exemple, l'élément enfant sera positionné à 50 pixels de la gauche et à 20 pixels du haut de l'élément parent.

Élément de positionnement fixe Par rapport à la fenêtre

Pour positionner un élément fixe par rapport à la fenêtre, utilisez le CSS suivant property:

position: fixed;
Copier après la connexion

Lorsqu'un élément est positionné de manière fixe, sa position est déterminée par rapport à la fenêtre. Par exemple :

#my-element {
  position: fixed;
  right: 0;
  top: 120px;
}
Copier après la connexion

Dans cet exemple, le my-element sera positionné à 120 pixels du haut et à 0 pixel de la droite de la fenêtre.

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!

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