Question

为什么控制台代码是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>

Answer 1

这是因为在大多数浏览器中默认情况下将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>

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

1 个答案: