为什么top：0与position：绝对无效，如果另一个元素在这里有margin-top？

Question

为什么top:0 position:absolute无法在此工作？

我想提一下，在这种情况下，除了.heatmap

之外，我无法控制任何其他元素

body {
  position: relative;
  margin: 0;
  padding: 0
}

.section1 {
  margin-top: 107px;
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

Answer 1

您遇到了collapsing margins。

heatmap定位于最近的祖先，其position 不 static。这是body元素。

body的第一个孩子有margin-top。

该边距在body的顶部坍塌，并将身体元素向下推离视口边缘。

您可以通过将轮廓应用于body元素来看到这一点。

body {
  position: relative;
  margin: 0;
  padding: 0;
  outline: solid pink 10px;
}

.section1 {
  margin-top: 107px;
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

要避免这种情况，请防止边距折叠。这可以通过在身体上使用填充而不是热图上的边距来轻松完成。

body {
  position: relative;
  margin: 0;
  padding: 107px 0 0 0;
  outline: solid pink 10px;
}

.section1 {
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

Answer 2

您只需从position: relative移除body即可，

body {
  margin: 0;
  padding: 0
}

.section1 {
  margin-top: 107px;
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

Answer 3

只需将 padding-top：1px; 添加到正文，它就会正常工作;

问题是第1部分的保证金导致折叠保证金

请看这个链接：

https://css-tricks.com/what-you-should-know-about-collapsing-margins/