Question

在这里演示：http://codepen.io/geoyws/pen/zqobWe

＆＃13;

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;
}

＆＃13;

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

＆＃13;

任何人都可以解释这种行为吗？根据兄弟姐妹的上边缘，对我来说根本不会影响固定定位元素。

Answer 1

除了示例15中的一个小例子here之外，我找不到任何关于它的参考，但根据经验，我可以保证absolute和fixed定位元素保持正常位置除非由top right bottom或left设置。

以下是一个例子：

.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属性集。

固定位置div出现在兄弟div位于margin-top而不是顶部的位置

1 个答案: