0

Does anyone have an idea / explanation why this code affects the anchestors in it's vertical position? This effect take place at least in chrome v75 and firefox v67 on linux.

Actually I would expect:

  • no affect on any parent-element of this two children
  • the first child on top aligned
  • second child followed by first child, fully visible

Codepen

.abs {
  position: absolute;
  width: 100%;
  height: 100px;
  background: red;
}

.static {
  margin-top: 100px;
  background: blue;
  height: 200px;
  width: 100%;
}
<header>
  <div class="abs">Absolute or fixed should have no space to the top</div>
  <div class="static"></div>
</header>
Marcel Tinner
  • 1,343
  • 11
  • 18
  • Juste put your header on position relative and add position absolute; top: 100px; to your second child – aflyzer Jul 30 '19 at 15:21
  • 1
    have a read about [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) (in particular, the section titled **No content separating parent and descendants**) - that is what is causing your gap above the parent, the child's margin top has collapsed outside the parent – Pete Jul 30 '19 at 15:27

1 Answers1

0

like that

.abs {
  position: absolute;
  width: 100%;
  height: 100px;
  background: red;
}

.static {
  position:absolute;
  top: 100px;
  background: blue;
  height: 200px;
  width: 100%;
}
<header style="position:relative;">
  <div class="abs">Absolute or fixed should have no space to the top</div>
  <div class="static"></div>
</header>
aflyzer
  • 563
  • 3
  • 12