Maison > interface Web > tutoriel CSS > Un élément à position fixe peut-il être relatif à son parent à position relative ?

Un élément à position fixe peut-il être relatif à son parent à position relative ?

Linda Hamilton
Libérer: 2024-12-06 18:32:13
original
861 Les gens l'ont consulté

Can a Fixed-Positioned Element Be Relative to Its Relatively-Positioned Parent?

Un élément peut-il être positionné de manière fixe par rapport à son parent si le parent est positionné de manière relative ?

Introduction

Cette question soulève un point intéressant sur l'interaction entre le positionnement fixe et relatif méthodes.

Positionnement fixe par rapport au parent

Non, positionner un élément fixe par rapport à son parent n'est pas possible, même si le parent est positionné relativement. Lorsqu'un élément est défini sur fixe, il est positionné par rapport à la fenêtre du navigateur, quel que soit le positionnement du parent.

Positionnement fixe par rapport à la fenêtre

Cependant, vous pouvez positionner un élément fixe par rapport à la fenêtre du navigateur en utilisant la syntaxe suivante :

#element {
  position: fixed;
  left: 50px;  // Horizontal position
  top: 50px;   // Vertical position
}
Copier après la connexion

Dans cet exemple, l'élément #element est positionné 50 pixels du bord gauche et 50 pixels du bord supérieur de la fenêtre du navigateur.

Exemple

Considérez le code HTML et CSS suivant :

<div>
Copier après la connexion
#wrapper {
  position: relative;
  width: 300px;
  background-color: orange;
  margin: 0 auto;
}

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

Dans cet exemple, bien que le div parent (#wrapper) soit positionné de manière relative, le lien enfant (#feedback) est positionné de manière fixe par rapport au fenêtre du navigateur. Le lien sera donc positionné à 0px du bord droit et à 120px du bord supérieur de la fenêtre du navigateur, quel que soit le positionnement du parent.

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