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
Linda Hamiltonoriginal
2024-12-06 18:32:13884parcourir

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
}

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>
#wrapper {
  position: relative;
  width: 300px;
  background-color: orange;
  margin: 0 auto;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

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!

Déclaration:
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