Question

我正在尝试提取元素的位置，并且我意识到left和top的CSS属性会将不同的值返回到$element.position().left或$element.position().top。

我试图跟踪的<div>绝对定位：

＆＃13;

.container {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0px;
}

.target {
  position: absolute;
  left: 0%;
  top: 12%
}

＆＃13;

<div class="container">
  <div class="target">
  </div>
</div>

＆＃13;

因此$('.target').css('top')返回'12%'而$('.target').position().top返回0。

预计会出现这种差异吗？或者我有什么遗漏？我项目中的元素显然不位于0,0！

而且，更重要的是，为什么两者 position（）。top和position（）。left属性返回0，给定元素在屏幕上的最终渲染位置，其中一个属性应该是非零的？

Answer 1

css('top')如果设置了css指令，则会返回top指令。{/ p>

position().top会返回计算出的top位置。

我有top position到0，这是因为您的container没有定义height，这是{{1}的“正常”行为}}

即使您bootstrap上有position: absolute。

要让target成为top position身高的12%，您必须修正container'身高，如下所示：

container

$(document).ready(function() {

  console.log($(".target").position().top);

});

.container {
  position: relative;
  height: 500px;
}

.target {
  position: absolute;
  left: 0%;
  top: 12%
}

要让<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="target"> aaa </div> </div>成为文档的top position，您必须在12%上使用position: fixed，如下所示：

target

$(document).ready(function() {

  console.log($(".target").position().top);

});

.container {
  position: relative;
}

.target {
  position: fixed;
  left: 0%;
  top: 12%
}

Answer 2

就像ADreNaLiNe-DJ刚刚说css('top')返回css指令top，在你的情况下返回12％，而position().top返回计算的top位置

您必须为父容器定义height或padding，才能使用position().top

查看与0不同的值

$ element.css（＆＃39; top＆＃39;）将不同的值返回给$ element.position（）。top

2 个答案: