1. 获取和设置元素的尺寸
2. 获取元素相对页面的绝对位置：offset()
这种方式增加的盒子不会对之前的结构产生影响
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $pos = $('.pos');
var pos = $pos.offset();
var w = $pos.outerWidth();
// alert(pos.left);
// console.log(pos);
$('.pop').css({left:pos.left+w,top:pos.top});
$pos.mouseover(function () {
$('.pop').show();
});
$pos.mouseout(function () {
$('.pop').hide();
});
})
</script>
<style type="text/css">
.box{
100px;
height:100px;
background-color: hotpink;
margin-bottom: 10px;
}
.pos{
margin-left:500px;
}
.pop{
100px;
height:100px;
background-color: gold;
position:fixed;
left:0;
top:0;
display: none;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box pos"></div>
<div class="box"></div>
<div class="pop">提示信息</div>
</body>
</html>
3. $(window).height(): 获取可视区的高度（桌面显示的一个窗口的大小）
4. $(document).height(): 获取页面高度
5. $(document).scrollTop()；$(document).scrollLeft(): 获取页面滚动距离
