最近在用Bootstrap的bootstrap-datetimepicker.js插件时出现了一个BUG，弹出的日期选择器位置不对，BUG如下：

很明显，选择器往上漂浮了一些位置，分析了下bootstrap-datetimepicker.js这个文件的源码，找到如下代码

[cc lang=”javascript”]
if (this.pickerPosition === ‘top-left’ || this.pickerPosition === ‘top-right’) {
top = offset.top – this.picker.outerHeight();
} else {
top = offset.top + this.height;
}
//console.log(top)  153
top = top – containerOffset.top;
left = left – containerOffset.left;
//console.log(top)  113
this.picker.css({
top: top,
left: left,
zIndex: this.zIndex
});
[/cc]

看来问题的关键就出在 top = top – containerOffset.top;  因为这个原因所以导致结果和预期差了 40px，这里其实可以直接把这一句注释掉解决问题，但是这样处理以后可能会在其它地方出现新的问题，所以我们接着往上找  containerOffset.top

[cc lang=”javascript”]
var offset, top, left, containerOffset;
if (this.container instanceof ) {
containerOffset = this.container.offset();
} else {
containerOffset =(this.container).offset();
}
//log(containerOffset)  40
[/cc]

继续找，找到 this.container 定义的位置
[cc lang=”javascript”]
this.container = options.container || ‘body’;
[/cc]

去官方文档找了一下：http://www.bootcss.com/p/bootstrap-datetimepicker/ 并没有提到配置 container 的选项，说明这里默认 container 就是 body 了
[cc lang=”javascript”]
$(‘body’).offset()
Object {top: 40, left: 0}
[/cc]
打开浏览器试了下，果然是这样，接下来就是找为什么 body 会有 40px 偏移的问题了

最终发现是因为 .page-header 上方有40px的边距导致的问题的产生，为了验证猜想，我给这个div外面加了个 div class = ‘row’ 来试试

再次刷新首页，问题已经得到解决

收工。