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，以像素计。

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