html - 固定位置 div 出现在同级 div 位于 margin-top 而不是顶部的位置

Question

此处演示:http://codepen.io/geoyws/pen/zqobWe

app-header {
  position: fixed;
  /*top: 0px;*/
  /* Without this, app-header appears after the margin of his sibling below. Intuitively you would think that he would ignore his sibling's margin-top and stick at the top without having to state top: 0px;*/
  width: 100%;
  height: 25px;
  background: red;
}
[b] {
  display: block;
}
another-margin {
  margin-top: 100px;
  width: 100%;
  height: 50px;
  background: blue;
}
margin-generator {
  margin-top: 55px;
  width: 100%;
  height: 50px;
  background: green;
}

<div>
  <app-header b>HEADER</app-header>
  <another-margin b></another-margin>
  <margin-generator b></margin-generator>
</div>

谁能解释这种行为？根据 sibling 的 margin-top 影响固定定位元素对我来说似乎一点也不直观。

Answer 1

我找不到任何关于它的引用资料，除了一个小例子 here在示例 15 中，但根据经验，我可以保证 absolute 和 fixed 定位元素保持其正常位置，除非通过 top right< 设置 底部 或左侧。

这是一个例子:

.abs {
  position: relative;
  width: 50px;
  height: 50px;
  background: red;
}
.abs-2 {
  position: fixed;
  left: 60px;
  background: blue;
}
.abs-4 {
  position: absolute;
  left: 60px;
  background: green;
}
.abs-6 {
  position: fixed;
  background: yellow;
}

<div class="abs abs-1"></div>
<div class="abs abs-2"></div>
<div class="abs abs-3"></div>
<div class="abs abs-4"></div>
<div class="abs abs-5"></div>
<div class="abs abs-6"></div>

非红色元素是 absolute 或 fixed 定位在 left 属性集中的两个集合中。