带有`position：static`的div的错误offsetParent和offsetleft答案

【问题标题】：Wrong offsetParent and offsetleft for div with `position:static`带有`position：static`的div的错误offsetParent和offsetleft
【发布时间】：2014-12-25 12:49:17
【问题描述】：

假设我有一个具有以下结构的页面：

<div id="page">
    <div class="someblock">
        ....
        <div class="container">
            <span>January</span>
            <span>February</span>
            <span>March</span>
            ...
        </div>
        ....
    </div>
</div>

css

#page {
    position:relative;
    width:1000px;
    margin:0 auto;
}
.someblock {
    margin-left:500px;
}
.container span {
    display:inline-block;
}

现在我想获得<span> 之一的偏移量

var pos = $(".container span").first().offset().left;

假设pos 必须为0，但实际值约为1000。搜索问题后，我发现<span> 中的offsetParent 不是.container，而是#page。为什么？！！经过进一步搜索，我发现元素之间的唯一区别是position。 relative 对应 #page 和 static 对应 .contaier（浏览器的默认值）。临时解决办法是

div {
    position:relative;
}

但我不想要这种改变。所以我的问题-尽管元素有position:static，但如何获得元素的偏移量？

【问题讨论】：

页面上还有.container吗？
不，只有一个.container
看那个jsfiddle.net/5yxwmL95，展开result area再运行，可以看到值变了。
是的 @Waki 这不是一个很好的例子，因为所有的 div 都是从 0 开始的；我更新了示例，为父块添加了一些边距
看不出区别jsfiddle.net/5yxwmL95/1你试图获得第一个跨度的位置，对吧？

标签： jquery html css css-position

【解决方案1】：

你必须清楚地显示所有元素，所以添加这个：

 div {
    display:block;
 }
 .container {
    width:100%;
    float:left;
 }

【讨论】：

没错，所有的div都是块元素。
编辑了我的答案。再试一次

【解决方案2】：

试试看

var pos = $(".container").offset().left - $(".container span").first().offset().left;

http://jsfiddle.net/5yxwmL95/3/

【讨论】：

我在onReady中使用了这段代码，只是省略了创建源代码