Question

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

<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.在搜索问题后，我发现offsetParent <span>的{{1}}不是{＆1;}。 t .container但#page。为什么？！！进一步搜索后，我发现元素之间的唯一区别是position。 relative为#page，static为.contaier（浏览器为默认值）。临时解决方案是

div {
    position:relative;
}

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

Answer 1

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

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

Answer 2

试试吧

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

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

div的错误offsetParent和offsetleft与`position：static`

2 个答案: