Why Does a Fixed Header Move When its Siblings Do?

Fixed Header Motility: Unraveling the Enigma

Question:

Despite its supposed immovability, why does an element with position: fixed shift alongside non-positioned siblings?

Answer:

While fixed elements do appear anchored to the browser window, their positioning is calculated relative to the viewport, which encompasses elements within the document flow. Since the first element in document flow is the non-header div in this case, the viewport is determined after the margin-top attribute is applied.

Therefore, when margin-top: 90px is applied to the non-header div:

1. The default margin of the body element (8px) collapses with the margin-top of the main element (90px).
2. Both elements shift down by 90px, including the header element with position: fixed.
3. This is because the viewport is calculated from the top of the body element, not the fixed element.

Conclusion:

Fixed elements, despite being removed from document flow, are still affected by the positioning of elements within that flow. Understanding this relationship is crucial for accurate layout and positioning on web pages.

The above is the detailed content of Why Does a Fixed Header Move When its Siblings Do?. For more information, please follow other related articles on the PHP Chinese website!