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

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> <pre class="brush:php;toolbar:false">#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.