CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements

Problem Description

I want to use CSS to achieve the top fixed effect:

Try to implement margin-top and position:fixed, the code is as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style type="text/css">
      .header {
          position: fixed;
          height: 20px;
          width: 100%;
      }
      .content {
          margin-top: 30px;
      }
      .aside {
          float: left;
          width: 200px;
          background: orange;
      }
      .main {
          overflow:auto;
          background: yellow;
      }
  </style>
</head>
<body>
    <div class="header">123</div>
    <div class="content">
        <div class="aside">aside</div>
        <div class="main">main</div>
    </div>
</body>
</html>

As a result, the header is not positioned at the top, but the margin-top distance of the content is vacated:

According to the definition of position:fixed, the header has been separated from the document flow and should not be affected by the content layout, but this is not the case.

Problem exploration

1. Change margin-top of content to padding-top: the expected effect can be achieved.
2. Content sets margin-top and padding-top at the same time: margin-top space will still be left.
3. Set padding-top on body: it will leave space for padding-top of body to achieve the expected effect.
4. Setting margin-top on body will leave a distance of max(body->margin-top,content->margin-top).
5. Set the top of the header, such as top: 0; it is not affected by the layout of the body and content.

TBD: Detailed test code and effect diagram will be added later (￣∇￣)...

Summarize

It all comes down to the impact of margin-top collapse on position:fixed. First, for a position:fixed element, if top is not specified, its reference origin in the vertical direction is the upper edge of the content of the body box model. If top is specified, its reference origin in the vertical direction is what we often call the upper boundary of the viewport, and the same applies to left and horizontal directions. The reference origin here refers to the reference object when the fixed element is laid out. Once determined, the position of the fixed element will no longer change even if the page is pulled down and the upper boundary of the body moves up. Secondly, because of the margin-top collapse problem, after setting the margin-top of the content, the content part of the body will move down, that is, it will move down with reference to the origin, so the fixed element will leave space for the margin-top.

Therefore, this problem can be solved from two aspects:

1. Change the reference origin to the viewport: set the top of the fixed element.

2. Solve the margin-top collapse problem. For more methods, see the link below:

1) Set padding-top to body.
2) Set a border for the body. The border color should be the same as the background color.
3) Set position:fixed to body, which will cause the scroll bar of the body to disappear.

Just bear with it for now~I will perfect it after I’m busy with this period (sad face)(sad face). . .
TBD: The content name and box model content are changed and need to be changed...

Don’t understand position:fixed? => position|MDN
Don’t understand margin-top collapse? => The phenomenon and solution of margin-top collapse problem

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Web page printing thin line table + page printing ultimate strategy

>>: Detailed tutorial on building a JMeter+Grafana+Influxdb monitoring platform with Docker