CSS challenge product page: confused with position fixed

Hi!
In an attempt to recreate the product landing page, I’m trying to make a page-wide fixed <header> block with a centered <main> block below it.
fixed01
https://codepen.io/wayanK/pen/abvLMWG

Things I don’t understand:

  1. I thought “position:fixed” would be sufficient to set the header in a fixed position relative to the browser tab:
header {
      position: fixed;
      width: 100%;
      background: orange;
      height: 50px;
      margin-top: 0px;
      z-index:1;
}

But actually, this code lines the top of the header up with the top of the main block. I made the header half transparent to demonstrate this.

fixed03

In order to align the header with the browser tab, i have to set the position of the main block to “absolute”.

I don’t understand why the settings of the main block affect the position of the header, and why the header aligns itself with the main block if the main block is not set to “position: absolute”.

  1. I tried to center the main block horizontally by setting the left and right margins to “auto”. But when the position of the main block is set to “absolute”, the “auto” settings of the left and right margins are ignored and the main block is left aligned.
    fixed04

As a workaround, I can set the margins to percentages.

    main {
      background: #bbf;
      width: 50%;
      margin-left:25%;
      margin-right:25%;
      margin-top: 60px;
      position: absolute;
    }

This centers the main block:

fixed05

But I don’t understand why setting the margins to “auto” no longer works.

Thanks!

Hi !

Hope this vidéo : CSS positioning help you with your understanding quest :slight_smile:

Hi!
Thanks for replying and thanks for the link, I’m watching all his videos now :slight_smile: