Zuhair Zuhair - 1 month ago 5
CSS Question

when ever i write position fixed the width changes and some attributes are also changed

.container header{
position:fixed;
}


when ever I write this code about position then width of the header decreases and it also covers menu section which is below it. some portion of menu is then not able saw.

Answer

When you set an element to fixed or absolute position it no long 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>