为什么top:0与position:绝对不工作如果另一个元素在这里有margin-top？

您遇到了折叠边距.

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
}

something

hamara heatmap