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

HTML input file control limits the type of uploaded files

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

HTML input file control limits the type of uploaded files

Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk

Docker Nginx container and Tomcat container to achieve load balancing and dynamic and static separation operations

Docker installation steps for Redmine

Detailed explanation of Getter usage in vuex

Manjaro installation CUDA implementation tutorial analysis

In-depth understanding of CSS @font-face performance optimization

Let's talk about parameters in MySQL

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

How to set up Windows Server 2019 (with pictures and text)

Recommend

How to delete folders, files, and decompress commands on Linux servers

Pricing table implemented with CSS3

MySQL 8.0.20 compressed version installation tutorial with pictures and text

CSS to achieve Tik Tok subscription button animation effect

How to implement MySQL bidirectional backup

The difference between clientWidth, offsetWidth, scrollWidth in JavaScript

CSS Standard: vertical-align property

How to simulate network packet loss and delay in Linux

Creating private members in JavaScript

MySQL multi-instance configuration application scenario

Nginx prohibits direct access via IP and redirects to a custom 500 page

Detailed explanation of MySQL master-slave replication practice - GTID-based replication

Completely uninstall MySQL database in Windows system to reinstall MySQL

Understanding and usage scenarios of ES6 extension operators

Detailed steps for building a React application with a Rails API