Home>
HTML

I have just started studying HTML and CSS by myself.
I want to fix the header, but if you use positon: fixed ;, the header will shift to the left as in the image preview.

<body>
  
   
    
     Login 
   
  
. header {
  height: 65px;
  background-color: rgba (34,49,52,0.9);
  position: fixed;
  top: 0px;
.container {
  width: 1170px;
  margin: 0 auto;


If i look at the correct code, I set the width of the .header to 100%, but I don't know why. In the first place, unless you specify a width for block elements such as div, the initial value auto will expand to the full width. So why do you bother to set it to 100%, and why would it shift when you use position: fixed? Please tell me what part is affected by positin: fixed.
Also, in an answer to a similar question, "width: 1170px is specified in the child element's .container, so the width of the parent element header is also 1170px." Does it affect the parent element?

After that, another similar question was answered, but when top, left, and right are all 0px as in the following code, the header does not shift even if the width is not set to 100%. It was.

. header {
  height: 65px;
  background-color: rgba (34,49,52,0.9);
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
}


Looking at this, I have lost further understanding. .

Since I am a beginner, I think the questions are a lot messed up. Thank you.

  • Answer # 1

    fixedspecified in the

    positionproperty are ignored by other elements.

    "Elements withfixed" are placed relative to thehtmlelement. Simply put, an element withfixedis placed somewhere on the screen.

    withfixedspecified andwidth,left,rightproperty set toFor auto,auto, the initial value ofwidth, is thewidth to match the element content (the size of the descendant element).

    The main question, "Why do you specifywidth: 100%;?" can be explained by the third item above. "Element withfixed" is the width unlesswidthproperty orright,leftproperty is specified Becomes the width of the content andthere is no guarantee that it will spread across the page.

    For example, if there is an element withfixedspecified, and that element has a child element with a width of 250px, try to execute the following code (for operation check) Link). As you can see from the result, if you do not specify anything, the width of "element withfixed" is only 250px width of the child element. Therefore, this problem can be solved by specifying thewidthproperty.

    
      
        
      
    
    body {
      margin: 0;
    }
    .header {
      position: fixed;
      top: 0px;
      height: 65px;
      background-color: red;
    }
    .container {
      width: 250px;
      margin: 0 auto;
    }

    From the above, you should have understood why you needwidth: 100%. Next, "Iftop,left,rightare all 0,widthwas not required to be specified. I explain why.

    At the beginning of the answer, I wrote that "an element withfixed" is placed somewhere on the screen. The three propertiestop,left, andrightsetelements withfixedtoThis property is used to specify where to place it on the screen. In other words, ifleft: 0is set, the element withfixedwill move to the left edge of the page andtop: 0. Move to the top of the page. And if you specifyleft: 0andright: 0, theelement will stretch to the left and right edges as it is pulled. From this, you can see that it is possible to expand the "element withfixed" to the entire width of the page.


    Reference:

    9 Visual formatting model