Question

我有一些像这样的代码：

<style>
.box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: green;
    border: 1px solid black;
    float: left;

}

#wrapper {
    position: relative;
}
</style>


<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

我需要获得相对于#wrapper的每个框的左上角。我试图通过jQuery.position（）来做到这一点，但是，我没有得到正确的结果。继续获得0,0。任何人都可以。我认为这里的问题是花车......如果它们是绝对定位的，我会正确阅读它们。

Answer 1

这里有一些jQuery代码会提醒左侧位置。这适用于浮井。

$(function() {
    $('#wrapper div').each( function( index, item ) {
            alert( $(this).position().left);
    });
});

这里有一个jsFiddle：http://jsfiddle.net/ytGYS/

Answer 2

位置实际上工作正常，只需确保清除#wrapper以使其具有高度和宽度。你遇到的问题是，当所有元素都浮动时，你的父#wrapper会崩溃并且没有维度，所以jQuery无法弄清楚一件事与另一件有多远。

Answer 3

以下是标记和代码示例的小提示：http://jsfiddle.net/tBwwr/

Answer 4

+1 for andrewheins回答：

你完全正确;如果#wrapper太小而无法显示彼此相邻的所有浮动元素，则$（）。offset（）将为您提供彼此相对的元素的位置。

令人讨厌的是，在#wrapper获取正确宽度之前检查$（）。offset（）。例如，如果有两个$（document）.ready（）函数以错误的顺序执行。（首先得到offset（），然后设置宽度）

注意：我没有足够的声誉来表达他的回答或发表评论。

获得浮动元素的位置

4 个答案: