具有位置的 Div：绝对由同级 div 的边距移动

Question

为什么

div1

被从顶部边缘推开？它似乎遵循

div2

边距设置。 我希望

div1

的行为独立于

div2

（即坚持到顶部）。有没有办法让

div1

保持在屏幕顶部而不使用

top:0

。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.div1 {
  margin: 0rem;
  background: red;
  position: absolute;
}

.div2 {
  margin: 3rem;
  background: grey;
}

<div class="div1">div1</div>
<div class="div2">div2</div>

Answer 1

这是因为 div2 与其父级之间的 margin collapsing 。您可以在父容器上设置

display:flow-root

，在本例中为

body

。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  display: flow-root;
}

.div1 {
  margin: 0rem;
  background: red;
  position: absolute;
}

.div2 {
  margin: 3rem;
  background: grey;
}

<div class="div1">div1</div>
<div class="div2">div2</div>