Why Can a Fixed-Positioned Element Shift with Its Sibling Elements?

Why a Fixed Position Element Moves with Its Sibling

Despite being removed from the document flow with position: fixed, an element can still be affected by its siblings. This occurs due to the way the viewport is calculated.

The viewport is the area within the browser window that is visible to the user. It's calculated using the in-flow elements, which are the elements that participate in the regular document flow.

In the provided HTML, the first in-flow element is

, which has a margin-top: 90px. Since the

element is fixed, it's not considered in the viewport calculation.

However, the default margin of 8px on the element collapses with the margin on

. This results in both elements moving down by 90px, affecting the position of the fixed header.

To fix this, simply add top: 0 to the header CSS to place it at the top of the viewport, independent of the sibling elements' margins.

The above is the detailed content of Why Can a Fixed-Positioned Element Shift with Its Sibling Elements?. For more information, please follow other related articles on the PHP Chinese website!