has been paying attention to this problem, in fact, BFC and Margin Collapse are the right direction, and the answer adopted is only a representation-as experience rather than knowledge, which is difficult to generalize.
recommend a good article about BFC: understand BFC-Block formatting context
look at a definition of Margin Collapse first
Css2.1 specification: In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
A touch-up in Chinese is that the margin of all adjacent two or more boxes of elements will be merged into a single margin share (take the larger one when merging, not add it up). Contiguity is defined as sibling or nested box elements (that is, this can also occur between child and parent elements), and there is no non-empty content, Padding, or Border separation between them.
this is the so-called Margin Collapse, body as an ordinary box container, margin collapse,-sharpnav occurs with the adjacent non-BFC box-sharpmain as fixed box, default top is auto, and its value is based on the location where the fixed element appears in the html, while body moves down by default because the margin, that shares-sharpmain is equivalent to a padding-top, along the upper edge of body.
solution (or relationship)
- add overflow:hidden, to body to trigger its BFC (you can also see from the height 100% of body in this example that it is appropriate to set an overflow)
- add padding or border, to body to break the conditions under which margin collapse occurs
- explicitly update the top property for-sharpnav
- set postion:absolue, or display:inline-block to-sharpmain to trigger its BFC
- even if you wrap-sharpmain and-sharpnav with another layer, you need to set boder or padding or overflow-hidden on this layer
nav as fixed is located based on the first non-static position element in its parent chain, where
finds body.
then you can see that body is not positioned along the upper edge of the screen, because the content of body starts with the content of-sharpmain, so when sharpmain, a child element of body, has a margin-top, body has the same margin-top as its child element.
so you should try not to set margin-top, for the first child element of body, but instead to set padding-top for body.
if it helps you, please vote for up or accept the answer
BFC (Block formatting context) to know, interview must be tested
your body overlaps with the margin of-sharpmain. You can let body generate BFC, so that the margins do not overlap
create a BFC (incomplete) if one of the following conditions is met
- Root element or other element that contains it
- floating element (the float of the element is not none)
- absolute positioning element (element with position is absolute or fixed)
- inline block (element has display: inline-block)
- Table cell (element has default attribute of display: table-cell,HTML table cell)
- Table title (element has default attribute of display: table-caption, HTML table title)
- Block element with overflow and value other than visible,
- display: flow-root
- column-span: all should always create a new formatting context, even if elements with column-span: all are not wrapped in a multi-column container
add top:0; to-sharpnav
add position to-sharpnav position= "fixed" to fix top:0;left:0;
