如果另一个元素在这里有margin-top，为什么top:0 和position:absolute 不起作用？ [复制]答案

【问题标题】：Why top:0 with position:absolute not working if another element has margin-top here? [duplicate]如果另一个元素在这里有margin-top，为什么top:0 和position:absolute 不起作用？ [复制]
【发布时间】：2017-09-16 18:59:54
【问题描述】：

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

【问题讨论】：

你能定义“不工作”吗？它看起来和我期望的完全一样。您希望看到什么？
因为正文从第 1 部分开始 .. 由于边距
将 display:inline-block 添加到 .section1
@AndyHolmes — 它已经具有位置：相对于其父级。
我喜欢这个问题被否决的方式，而一直以来只有少数答案似乎掌握了真正发生的事情。我会说这是一个很好的问题。为什么它被否决了？

标签： html css

【解决方案1】：

只需将 padding-top: 1px; 给 body 就可以了；

问题是给 section1 的边距导致 边距折叠

查看此链接：

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

【讨论】：

这确实有效，但在这种情况下，OP 无法控制 body
我不认为你可以在不改变身体等其他元素的 css 的情况下实现你想要的。
你也可以使用body::before { content: ''; display: block; padding-top: 1px; }
同样，OP 无法控制 body only .heatmap。此外，body:before 在某些情况下可能已经有用法

【解决方案2】：

你遇到过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 上使用 padding 而不是在 heatmap 上使用 margin 来完成。

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>

【讨论】：

我无法控制页面中除热图之外的其他元素。我想我将不得不使用fixed 而不是absolute
@JitendraVyas — 一个不应该有fixed 副作用的黑客将设置top: -107px。
但我并不总是知道保证金的价值。在不同的网站上可能会有所不同。
顺便说一句，fixed 可能有什么缺点？
它会永久占用视口的一部分。指向页面特定部分的链接将导致链接的内容被固定元素覆盖。

【解决方案3】：

您只需从body 中删除position: relative，它就会起作用

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>

【讨论】：

但我无法删除它
虽然这似乎可行，但对我来说，这似乎完全违反直觉。 <body> 可能是某种特殊情况吗？我希望.heatmap 出现在页面的“绝对”顶部，而忽略身体第一个孩子的top-margin。
你可以用position: initial代替relative