Question

HTML：

<div>
    <p id="par">paragraph</p>
</div>

CSS：

p {
  margin:0;
}

div {
  padding: 10px;
}

body {
  margin:0;
}

p.offsetTop返回10px。我的理解是，默认情况下，父元素div的位置静态值已设置，根据offsetTop documentation offsetTop是距离最近的相对定位的父元素顶部的像素数。那么，即使p没有相对定位的父元素，为什么它仍返回10px？

Answer 1

根据文档的正常流程放置元素，然后根据top，right，{{1}的值，相对于元素自身偏移}和bottom。偏移量不影响任何其他元素的位置；因此，页面布局中为元素提供的空间与位置为left的空间相同。

当CSS位置设置为值static或static，并且CSS relative设置为值float时，将触发正常流程。

...

    在none属性的值static触发的static定位中，将在正常流程布局定义的确切位置绘制框。

也就是说，当页面上没有 no 个定位元素时，所有元素都属于“正常流”，而每个元素的位置均由其祖先决定。

当您将position应用于margin时，这一点显而易见。 <body>增加以适应边距：

offsetTop

var p = document.getElementById('par');
console.log(p.offsetTop)

p {
  margin: 0;
}

.container {
  padding: 20px;
}

body {
  margin: 10px;
}

并且在修改<div class="container"> <p id="par">paragraph</p> </div>本身时可以进一步增强：

<html>

var p = document.getElementById('par');
console.log(p.offsetTop)

p {
  margin: 0;
}

.container {
  padding: 20px;
}

body {
  margin: 10px;
}

html {
  padding: 5px;
}

因此，<div class="container"> <p id="par">paragraph</p> </div>也增加了以容纳祖先，而与没有定位祖先的事实无关。