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:
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!