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

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

Docker exec executes multiple commands

Native js to achieve simple carousel effect

5 ways to achieve the diagonal header effect in the table

Two ways to declare private variables in JavaScript

How to use & and nohup in the background of Linux

How to build php-nginx-alpine image from scratch in Docker

Implementation of HTML to PDF screenshot saving function

What are the differences between sql and mysql

MySQL 8.0.12 installation steps and basic usage tutorial under Windows

Implementation principle and configuration of MySql master-slave replication

Recommend

How to use partitioning to optimize MySQL data processing for billions of data

VUE render function usage and detailed explanation

Teach you how to deploy zabbix service on saltstack

MySQL Query Cache Graphical Explanation

An article to understand Linux disks and disk partitions

Example analysis of the principle and solution of MySQL sliding order problem

Detailed explanation of Nginx reverse generation Mogilefs distributed storage example

Two ways to make IE6 display PNG-24 format images normally

Learning about UDP in Linux

Brief analysis of centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Sorting out some common problems encountered in CSS (Hack logo/fixed container/vertical centering of images)

Hyper-V Introduction and Installation and Use (Detailed Illustrations)

HTML uses the title attribute to display text when the mouse hovers

In-depth understanding of javascript class array

Explanation of monitoring parameters in performance and sys schema in MySQL 5.7 (recommended)