Question

我正在尝试使用jQuery的position方法来获取div的位置。 div具有position属性的默认属性。出于某种原因，它会返回Object {top: 0, left: 0}

特定div的HTML如下所示：

<div class="col-xs-3" id="increased-width">
            <div id="standards">
                <label><strong>My Energy Standards</strong></label>
                <a class="btn" data-toggle="modal" data-target="#energyStandardModal"><span class="glyphicon glyphicon-info-sign"></span></a>
                <br />
            </div>
            <div id="years">
                <h5><strong>My Study Periods (in years)</strong></h5>
                <div id="col-1" class="altStudyPeriod"></div>
                <div id="col-2" class="altStudyPeriod"></div>
                <div id="col-3" class="altStudyPeriod"></div>
                <div id="col-4" class="altStudyPeriod"></div>
            </div>
        </div>

jQuery代码也显示在这里：

$(document).ready(function () {
    standardDiv = $("#standards").position();
    console.log(standardDiv);
});

我也尝试使用offset（）方法，但它返回相同的值。但是，此特定位于网页的原点（0,0）

Answer 1

这里有FIDDLE可能有助于解释事情。

我已经使用了您的代码，但添加了一些CSS来澄清事情。

已经添加了边框，因此可以看到你的div，并且在col-xs-3 div之上有一个间隔div来推动所有内容。

col-xs-3父/持有人div需要拥有css position: relative。

请注意，在.position() div上使用#standards会使其位置相对于其容器div position: relative - ＆＃34; 0＆＃34;从顶部（容器div）。

在#standards div上使用.offset（）给出了它相对于窗口的位置 - ＆＃34; 59＆＃34;从顶部（窗口）。

JS

$('.putmehere').html( "#standards position.top using .position(): " + $("#standards").position().top );

$('.putmehere2').html( "#standards position.top using .offset(): " + $("#standards").offset().top );

修改：如果您愿意，可以在.spacerdiv10 div上方添加#standards，看看顶部测量结果会发生什么。

Answer 2

重复：jQuery get the location of an element relative to window 基本上，position返回css值（这是正确的），但你似乎想要从窗口偏移。

编辑：位置属性表示距离最近的父容器的偏移量，该容器具有相对定位。如果offset（）。top返回0，请尝试将其与窗口的偏移量进行比较，如前面提到的问题所示：

var eTop = $('element').offset().top; //get the offset top of the element
console.log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

在div位置静态返回0的位置

2 个答案: