Why is an element with position: fixed moving with a non-positioned sibling?

by

With position: fixed, your header element is removed from the document flow.

The first in-flow element is main, which has margin-top: 90px in your code.

The parent of this element is body, which normally has a default margin: 8px (see HTML default style sheet).

Due to CSS margin collapsing, the body element’s margin-top: 8px is collapsed with the main element’s margin-top: 90px.

As a result, both elements, now having the same margin, shift down 90px.

html {
    background-color: green;
    height: 100%;
 }

body {
    background-color: pink;
    height: 100%;
}

header {
   position: fixed;
   border: 1px solid red;
}

main {
  margin-top: 90px;
  background-color:yellow;
}
<header>Project Header</header> 
<main class="container" id="layout-mainContent">
    <div class="row" id="first-row">somecontent</div>
</main>

jsFiddle

The reason the fixed header moves is as follows:

  • Although the containing block for an element with position: fixed is the viewport…
  • The CSS offset properties (top, bottom, left and right) have an initial value of auto, which keeps the element where it normally would be if it were in the document flow.
  • Said another way, when you set an element to position: absolute or position: fixed (another form of position: absolute), you’re specifying the type of positioning you want… but you’re not positioning it anywhere.
  • It isn’t until you define the offsets that the element is actually positioned.
  • To shift the header to the top of the viewport, use top: 0.
html {
    background-color: green;
    height: 100%;
 }

body {
    background-color: pink;
    height: 100%;
}

header {
   position: fixed;
   border: 1px solid red;
   top: 0px; /* NEW */
}

main {
  margin-top: 90px;
  background-color:yellow;
}
<header>Project Header</header> 
<main class="container" id="layout-mainContent">
    <div class="row" id="first-row">somecontent</div>
</main>

jsFiddle

More Related Contents:

  1. How to center a “position: absolute” element
  2. ‘transform3d’ not working with position: fixed children
  3. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  4. How does the “position: sticky;” property work?
  5. Why does position:relative; appear to change the z-index?
  6. Why do absolute elements stack up on each other instead of stacking one after the other?
  7. Absolute position is not working
  8. Position: sticky buttons not working in IE 11
  9. ‘position: sticky’ not working when ‘height’ is defined
  10. Center aligning a fixed position div
  11. Position absolute and overflow hidden
  12. Absolute positioning inside absolute position
  13. How to make div’s percentage width relative to parent div and not viewport
  14. Why isn’t my margin working with position: fixed?
  15. Why doesn’t width/height work with non positioned pseudo elements?
  16. Position fixed doesn’t work when using -webkit-transform
  17. body { overflow-x: hidden; } breaks position: sticky
  18. Why using absolute position causes the div to be on top?
  19. sticky position on css grid items
  20. How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
  21. How to work with ellipsis in bootstrap responsive table
  22. Equal height columns with CSS
  23. How to replicate background-attachment fixed on iOS [duplicate]
  24. How to make a pure css based dropdown menu?
  25. What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
  26. How to center the contents of a div [duplicate]
  27. Change the color of a bullet in a html list?
  28. CSS wrong appearance of border-radius on a nested div
  29. How to make a border overlay child div?
  30. Why does the ‘title’ attribute cause browsers to ignore my styles?

Leave a Comment