0

I am using the code below to fix the position of the header bar,but this code is disturbing other components of HTML.

    .container header{
        position:fixed;
    }

Whenever I write this code about position, the width of the header decreases and it also covers menu section which is below it.

Some portion of menu is then not able to be seen. How to style this so that other components of HTML stay with its own styling

analogbeing
  • 28
  • 1
  • 7
  • 2
    [That's how fixed elements work](https://developer.mozilla.org/en-US/docs/Web/CSS/position) ... what do you want to happen ? – DaniP Oct 25 '16 at 17:06
  • 1
    Possible duplicate of [Position Fixed elements](http://stackoverflow.com/questions/24783299/position-fixed-elements) – VDWWD Oct 25 '16 at 22:38

1 Answers1

1

When you set an element to fixed or absolute position it no longer attempts to fill the width of the parent element. It will take up the width and height of it's content. These elements are also taken out of the normal document flow so they no longer take up any space.

Using position: fixed; will align the element to the browser viewport as it's containing element. Since a fixed position element doesn't take up any space the reset of the content will behave as if it's not on the page and position itself accordingly. The fixed position element will then end up overlaying that content.

To remedy the overlay affect you will need to add padding or margin to the element that is being overlaid equal to the height (or more) of the fixed position element. Padding is typically used as margins collapse.

Before Sizing and Padding

body {
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  line-height: 30px;
  background-color: #444;
  color: #f1f1f1;
}
<header>
  Something should go here.
</header>
<main>
  <p>
    Content after fixed position element.
  </p>
  <p>
    Content after fixed position element.
  </p>
</main>

With Sizing and Padding

body {
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  width: 100%; /* -or- left: 0; right: 0; */
  line-height: 30px;
  background-color: #444;
  color: #f1f1f1;
}
main {
  padding-top: 30px; /* -or- margin-top: 30px; -watch out for collapsing margins- */
}
<header>
  Something should go here.
</header>
<main>
  <p>
    Content after fixed position element.
  </p>
  <p>
    Content after fixed position element.
  </p>
</main>
hungerstar
  • 21,206
  • 6
  • 50
  • 59