如果另一个元素在这里有margin-top，为啥top:0 和position:absolute 不起作用？ [复制]
Posted
技术标签:
【中文标题】如果另一个元素在这里有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 — 它已经具有位置：相对于其父级。 我喜欢这个问题被否决的方式，而一直以来只有少数答案似乎掌握了真正发生的事情。我会说这是一个很好的问题。为什么它被否决了？ 【参考方案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以上是关于如果另一个元素在这里有margin-top，为啥top:0 和position:absolute 不起作用？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
求教我一个div下面嵌套了另一个div，当我设置子div的margin-top的值时，为啥父div也跟着变成
为啥当我在另一个 div 的 div 上放置一个 margin-top 时，BODY 也会接受它？ [复制]
为啥我的 margin-top 会将整个部分向下移动？ [复制]
学习css 在用margin进行布局的时候，内层使用margin-top应该是相对于父层边框定位，为啥连父层也一起移动