为什么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

您遇到了折叠边距.

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>