jquery - 为什么position()。top在元素上显示8而没有任何边距或填充？

为什么此代码8的控制台结果？我期望使用0，因为在.title和.parent之间没有任何边距，填充等。

console.log($('#title').position().top);

.parent {
  background: lightgreen;
  height: 79px;
}

.title {
  background: gold;
  line-height: 54px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='title' id='title'>lorem ipsum</div>
</div>

最佳答案

这是因为大多数浏览器默认将margin添加到body中。您将需要删除它：

console.log($('#title').position().top);

body {
  margin: 0;
}

.parent {
  background: lightgreen;
  height: 79px;
}

.title {
  background: gold;
  line-height: 54px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='title' id='title'>lorem ipsum</div>
</div>

我建议您使用重置样式表来标准化所有CSS中每个浏览器的起点。


但是位置是相对于父母的，而不是相对于身体的！


几乎-与偏移父级有关（请参见jQuery docs）。微小但至关重要的区别。这意味着最接近的父元素不是position: static，因为它们都是默认设置。由于您没有任何这些，它会上升到body。要解决此问题，请在position: relative上设置.parent：

console.log($('#title').position().top);

.parent {
  position: relative;
  background: lightgreen;
  height: 79px;
}

.title {
  background: gold;
  line-height: 54px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='title' id='title'>lorem ipsum</div>
</div>

关于jquery - 为什么position()。top在元素上显示8而没有任何边距或填充？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53228982/