Question

有人对这个代码为什么会影响垂直方向上的anchestor有任何想法/解释吗？这种效果至少发生在Linux上的chrome v75和firefox v67中。

实际上我希望：

不影响这两个孩子的任何父母元素
最上方的第一个孩子对齐
第二个孩子之后是第一个孩子，完全可见

.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>

Answer 1

喜欢

.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>

孩子的边缘影响祖先，包括身体

1 个答案: