css position fixed is taking the margin of the other div

Question

body {
  background-color:whitesmoke
}

.fixed {
  background-color:gray;
  position: fixed;
}

<body>
  <div class="fixed">
    <h1>header data</h1>
  </div>
    <div style="margin-top: 60px;">
      <h1>hello how are you</h1>
  </div>
</body>

I have this code inside my body and first div inside the body which has fixed position but it starts by giving the margin 60 from the top which is given in the second div. As the fixed position always takes position with respect to document, then why it is taking the margin of the second div.

Because _collapsing margins_, that’s why. https://css-tricks.com/what-you-should-know-about-collapsing-margins/, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing — CBroe, Jul 27 '20 at 07:32

Greedo · Answer 1 · 2020-07-27T07:44:59.237

Just specify the position of the fixeddiv, if not it get (wrongly) inferred. Adding top: 0 will set the fixed div to the top of the screen.

 <div style=" position: fixed; background-color: aqua; top: 0;">
     <h1 >header data</h1>
 </div>
 <div style="background-color: aliceblue;">
     <div style="margin-top: 60px;">
         <h1>hello how are you</h1>
     </div>
 </div>

Edit As stated in documentation (bold added):

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none [...]

And as CBroe pointed out, for margin collapsing:

If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

You can see the difference between this two snippets: the first creates a non-empty, 1px block that contains the fixed element, while the other creates an empty block, causing margins to collapse.

<div style="display: block; height: 1px;">
<div style=" position: fixed; background-color: aqua;">
     <h1 >header data</h1>
 </div>
 </div>
 <div style="margin-top: 60px; background-color: aliceblue;">
     <h1>hello how are you</h1>
 </div>

Another solution will be to use padding instead of margin, in order to avoid the collpasing to trigger:

<div style="display: block; height: 0px;">
<div style=" position: fixed; background-color: aqua;">
     <h1 >header data</h1>
 </div>
 </div>
 <div style="margin-top: 60px; background-color: aliceblue;">
     <h1>hello how are you</h1>
 </div>

<div style=" position: fixed; background-color: aqua;">
     <h1 >header data</h1>
 </div>
 <div style=" padding-top: 60px;">
     <div style="background-color: aliceblue;">
         <h1>hello how are you</h1>
     </div>
 </div>

i know that adding the top 0 will do that . But i want to know the reason why it is taking the margin of the child div. — rohit garg, Jul 27 '20 at 07:19

css position fixed is taking the margin of the other div

1 Answers1