相对于另一个不工作的定位元素

Question

我正在尝试使用jQuery offset()方法相对于另一个元素定位元素，并且试图弄清楚为什么$(window).resize函数不起作用。

JSBIN： http ://jsbin.com/lanako/7/edit?html,js，输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>


div{
display:inline-block;
position:relative;
height:200px;
width:200px;
border:solid black;    
}

#somepara{
border: solid blue;
position:relative;
left:20%;
}

</style>
<body>
  <div id ="first"> FIRST</div>

  <div id = 'somepara'>  </div>


</body>
</html>

JavaScript：

var p = $( "#somepara" );
var pf =  $('#first');
var offset = p.offset();
p.html( "left: " + offset.left);

function offcss(){
pf.css({'left': offset.left + 6 + "px"});
}

$(document).ready(function(){
  offcss();
    $(window).resize(function(){
        offcss();
    });


});

我基本上敛offset().left第二元件的('#somepara')并试图设置的CSS ('#first')从右侧6个像素(#somepara)注： (#somepara)是已液体测量值（％），因此左侧位置会发生变化。

该方程式最初有效，但我想在调整浏览器大小时使用方程式pf.css() ，该方程式计算要执行的(#first)的css left属性。 不幸的是，我设置的$(window).resize函数无法正常工作，因此(#first)的left属性不变。 最终目标我想是不管浏览器的大小，该元件将由6个像素（被分离#first从右6个像素#somepara ）。

任何帮助将不胜感激！

Answer 1

调整大小时， #somepara的位置#somepara更改，因此，每次调用offcss()函数时（不仅是第一次加载时），都需要获取p.offset()的值。

function offcss() {
    pf.css({'left': p.offset().left + 6 + "px"});
}

关于调整大小，似乎确实可以满足您的要求。

检查以下示例：
http://jsbin.com/dewazuyuqo/1/edit?html,js，输出