jQuery之position()方法的具体使用

问题描述：今天我在解决一个HTML块元素显示问题，需求是有一个操作按钮，点击操作按钮，便在该操作按钮左边

显示一个<div>块元素，块元素中列出增删改查等操作，点击增删改查可完成该行数据的对应操作。

我的jsp代码如下：

<div id="newsMoreBusinessOper">
<div id="newsMoreBusinessOperBody">+操作</div>
<div id="operationBody" class="false">
<div><a href="http://www.baidu.com">详细信息</a></div>
<div><a href="http://www.baidu.com">删除</a></div>
</div>
</div>

css样式如下：

.newsMoreContentMessage #newsMoreBusinessOper #newsMoreBusinessOperBody{
color: #0098e7;
background-color:white;
font-size:14px;
width:88px;
height:26px;
line-height:26px;
margin:6px auto;
border:1px solid #0098e7;
text-align:center;
}

.newsMoreContentMessage #newsMoreBusinessOper #operationBody{
position:absolute;
height:60px;
width:88px;
border:1px solid #0098e7;
}

js样式如下：

$(function(){
//点击操作按钮，在按钮的左边弹出操作框
$(".newsMoreContentMessage #newsMoreBusinessOper #newsMoreBusinessOperBody").click(function(){
console.log($(this).attr("id"));
var operationBodyTop=$(this).position().top;
var operationBodyLeft=$(this).position().left-90;
$(this).next().css({
"top":operationBodyTop,
"left":operationBodyLeft,
});

if('true'==$(this).next().attr("class")){
$(this).next().attr("class","false");
$(this).css({
"background-color":"white",
"color":"#0098e7",
});
}else{
$(this).next().attr("class","true");
$(this).css({
"background-color":"#0098e7",
"color":"white",
});
}

});

});

$(window).resize(function(){
$(".newsMoreContentMessage #newsMoreBusinessOper #newsMoreBusinessOperBody").click(function(){
var operationBodyTop=$(this).position().top;
var operationBodyLeft=$(this).position().left-90;
$(".newsMoreContentMessage #newsMoreBusinessOper #operationBody").css({
"top":operationBodyTop,
"left":operationBodyLeft,
});

});
});

  

出现的问题如下面的图片所示，块元素不是右边紧贴操作按钮，而是贴在操作按钮父元素的边上。



我js中用console.log($(this).attr("id"));输出了一下

浏览器显示为 newsMoreBusinessOperBody    说明这里取的值确实是操作按钮的。

而position() 方法返回匹配元素相对于父元素左上角的位置

修改部分的js代码，如下：

var operationBodyTop=$(this).position().top+6;
var operationBodyLeft=$(this).position().left-75;

position()方法的使用

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

此方法只对可见元素有效。