Why Can Fixed Elements Be Affected by Non-Positioned Siblings?

Understanding the Behavior of Fixed Elements: Why They Can Be Affected by Non-Positioned Siblings

In the realm of CSS positioning, it appears perplexing why an element with position: fixed can be influenced by a non-positioned sibling element. However, understanding the underlying mechanics reveals a logical explanation.

An element with position: fixed is removed from the normal document flow and positioned relative to the browser viewport. The viewport is the visible area of the web page within the browser window.

In the example you provided, the header element is fixed, while the main element has margin-top: 90px. Surprisingly, the header moves downward as if it were affected by the margin.

To comprehend this behavior, we must consider the role of CSS margin collapsing. When two elements with margins touch, their margins merge into a single margin. In this case, the body element (the parent of the main element) has a default margin of 8px. When the main element's margin-top of 90px is applied, margin collapsing occurs, resulting in a combined margin of 98px.

This combined margin shifts both the body and main elements downward by 98px. Since the header is fixed relative to the viewport, it moves along with the viewport, which is calculated based on the elements in the document flow. As the main element is the first in-flow element, its margin affects the calculation of the viewport, causing the header to appear to move downward.

In essence, the fixed header's position is not directly impacted by the non-positioned sibling in terms of physical positioning. However, the sibling's margin affects the viewport calculation, indirectly influencing the header's apparent movement.

The above is the detailed content of Why Can Fixed Elements Be Affected by Non-Positioned Siblings?. For more information, please follow other related articles on the PHP Chinese website!