弹出控件的位置该如何计算？

时间：2016-07-14 02:06:09 阅读：180 评论：0 收藏：0 [点我收藏+]

标签：

近段时间在写组件，页面有一个输入框，点击输入框，弹出一个国家控件或者是城市控件。但是这个控件的位置该如何放一直是一个头疼的问题。可能是开始没有沉下心来想，总觉得这是个技术难题，还在网上和群里向很多高手请教，他们给出的答案也并不是我想要的。最后不得不自己想想该如何解决这个问题了，现在把自己的一些思考写出来，一来防止忘记，二来也算个分享。

思路：

前提条件：只能拿到一个输入框对象。

1、position的取值：absolute、relative和fixed三种。relative是相对定位，很明显不适合，因为在实际操作中，根本不确定input是否有父节点，以及父节点的定位是什么，那么相对定位，相对的对象是不可知的，所以可以排除relative。其次是固定定位fixed，这个也是不可行的。举个简单的例子，如果把控件定位到（100,100）的位置，那么如果有滚动条，该控件不会跟着页面滚动，要是还是不明白，想想博客园页面上回到顶部的功能就应该明白了。

2、经过以上思考，至少可以确定，控件的position一定是absolute了，那么它的left值和top值该怎么计算呢？肯定要先从input输入框入手。

3、由于在开发中用的jquery库，那么首先想到的就是$.offset()方法，查看API得知，offset是用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标，说白了就是获取当前元素的绝对位置。且该位置是相对于当前文档（页面）的。既然是这样，控件的left就应该是当前元素的left值，控件的top就应该是当前元素的top值加上当前元素的自身高度了。为了验证，立马写了一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <script type="text/javascript" src="demo/jquery-1.9.1.js" ></script>
    <style type="text/css">
        .layer{width:400px; height:300px; background:red;position: absolute;}
    </style>
    </head>
    <body style="height:2000px;">
        <input type="text" id="input1" placeholder="请选择 "  style="margin-top:100px;" onclick="addLayer();"/>
    </body>
</html>
<script type="text/javascript">
    function addLayer(){
        var pointer = $("#input1").offset();
        var $div = $("<div class=‘layer‘></div>");
        $div.css({left:pointer.left, top:pointer.top+$("#input1").height()});
        $("body").append($div);
    }
</script>

运行正常，也不会随着滚动条的变动而变动位置，很不错。

4、然而由于我的整个项目是用的angular的路由来控制的，左边是导航，右边是内容区，发现异常了，控件和input输入框分离了，找了半天原因，也没找到，开始怀疑自己写的控件有问题，亦或计算位置的思路不正确？纠结了半天，没找到问题的原因，最后不得不用那万能的排除法了。

5、怎么排除呢？首先在网上找了一个日历控件(My97 datepicker),引用进来，发现还是存在这个问题。非常开心，看来不是控件写的有问题，那到底是啥原因呢？继续找。。。。。

6、然后各种实验，最后终于找到原因了：滚动条的问题，如果不是body的滚动条或者是iframe的滚动条，就会遇到这个问题。其实沉下心来想想，很容易就想通，因为offset是根据document计算的相对偏移量，虽然input框所在的区域包含滚动条，但是这个滚动条不是属于document的，所以在滚动的时候，input会随着走，而控件始终留在相对于document的位置。另外，input会跟着动，是因为input并不是根据document来定位的。也就是说，我控件的位置是根据input相对于document的偏移量来获取的，但是并不代表input的位置就是按照这个偏移量来设置的。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     <script type="text/javascript" src="demo/jquery-1.9.1.js" ></script>
 7     <style type="text/css">
 8         .layer{width:400px; height:300px; background:red;position: absolute;}
 9         .wrap{height:500px;overflow: auto;}
10         .inner{height:1000px;}
11     </style>
12     </head>
13     <body style="height:2000px;">
14         <div class="wrap">
15             <div class="inner">
16                     <input type="text" id="input1" placeholder="请选择 "  style="margin-top:100px;" onclick="addLayer();"/>
17             </div>
18         </div>
19     </body>
20 </html>
21 <script type="text/javascript">
22     function addLayer(){
23         var pointer = $("#input1").offset();
24         var $div = $("<div class=‘layer‘></div>");
25         $div.css({left:pointer.left, top:pointer.top+$("#input1").height()});
26         $("body").append($div);
27     }
28 </script>

7、看来这个问题真是没办法解决了，真的没有办法呢？不死心，接着想。。。。。

8、一不小心，又发现了jquery的position（）方法,那就用这个方法试试，思路是先用position()方法获取input相对父元素的偏移量，然后给控件设置位置。另外用递归查找input的所有父元素中第一个position为relative的的父元素，把控件append上去。实验表明，如果input的父节点直接是relative的，没有问题，但是要是input的所有父节点都没有，最后还是找到body上去了。结果和上面一样的。