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

Can an Element Be Positioned Fixed Relative to Its Parent If Parent Is Positioned Relative?

Introduction

This question raises an interesting point about the interplay between the fixed and relative positioning methods.

Positioning Fixed Relative to Parent

No, positioning an element fixed relative to its parent is not possible, even if the parent is positioned relative. When an element is set to fixed, it is positioned relative to the browser window, regardless of the parent's positioning.

Positioning Fixed Relative to Window

However, you can position an element fixed relative to the browser window using the following syntax:

#element {
  position: fixed;
  left: 50px;  // Horizontal position
  top: 50px;   // Vertical position
}

In this example, the element #element is positioned 50 pixels from the left edge and 50 pixels from the top edge of the browser window.

Example

Consider the following HTML and CSS code:

<div>

#wrapper {
  position: relative;
  width: 300px;
  background-color: orange;
  margin: 0 auto;
}

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

In this example, although the parent div (#wrapper) is positioned relative, the child link (#feedback) is positioned fixed relative to the browser window. Therefore, the link will be positioned at 0px from the right edge and 120px from the top edge of the browser window, irrespective of the parent's positioning.

The above is the detailed content of Can a Fixed-Positioned Element Be Relative to Its Relatively-Positioned Parent?. For more information, please follow other related articles on the PHP Chinese website!