Why Does a Fixed Header Move with a Non-Positioned Sibling?

Understanding Fixed Element Behavior: Why a Fixed Header Moves with a Non-Positioned Sibling

Fixed positioning in CSS places an element in a fixed position relative to the viewport. However, it's important to understand that the viewport is calculated based on elements within the normal document flow.

In the provided HTML, the header element is fixed while the main element has a margin-top applied. When these elements are placed in the document, the following occurs:

1. Fixed Header: The header element, with position: fixed, is removed from the document flow and placed at the top of the viewport.
2. Document Flow Calculation: The remaining elements, starting with the main element, establish the document flow. The margin-top: 90px applied to the main element signifies the vertical spacing between the header and the main content.
3. Viewport Calculation: The viewport is calculated based on the elements in the document flow. Since the first in-flow element is the main element with a margin-top of 90px, the viewport begins at this point.
4. Margin Collapsing: The body element, the parent of main, has a default margin of 8px. Due to CSS margin collapsing, the margin-top of main (90px) collapses with the margin-top of the body (8px), resulting in a combined margin of 98px.

As a consequence, both the main element and the header shift down by 98px, even though the header is fixed to the viewport. This is because the viewport itself is adjusted based on the collapsed margins within the document flow.

Therefore, it's crucial to consider that while fixed elements are positioned relative to the viewport, the viewport's position is determined by the elements within the regular document flow. This understanding explains why a fixed header can move along with a non-positioned sibling element.

The above is the detailed content of Why Does a Fixed Header Move with a Non-Positioned Sibling?. For more information, please follow other related articles on the PHP Chinese website!