Javascript DatePicker弹出窗口在引导选项卡外打开

我在引导选项卡中使用datepicker（）脚本。我的问题是，当我在选项卡中使用datepicker时，弹出窗口在窗口的左上角打开，而不是在字段的下方

当在引导选项卡之外使用时，它就像一个符咒

我正在努力解决这个问题10个小时了，没有任何运气

有人能帮我吗

以下是DatePicker的css：

        .calendar {
            font-family:Arial, Helvetica, sans-serif;
            font-size: 14px;
            background-color: #EEE;
            color: #333;
            border: 1px solid #777;
            padding: 5px;
            width: 14em;

        }

        .calendar .months {
            background-color: #58453F;
            color: #FFF;
            padding: 0.2em;
            text-align: center;
        }

        .calendar .prev-month,
        .calendar .next-month {
            padding: 0;
        }

        .calendar .prev-month {
            float: left;
        }

        .calendar .next-month {
            float: right;
        }

        .calendar .current-month {
            margin: 0 auto;
        }

        .calendar .months .prev-month,
        .calendar .months .next-month {
            color: #FFF;
            text-decoration: none;
            padding: 0 0.4em;
            cursor: pointer;
        }

        .calendar .months .prev-month:hover,
        .calendar .months .next-month:hover {
            background-color: #FDF5CE;
            color: #C77405;
        }

        .calendar table {
            border-collapse: collapse;
            padding: 0;
            font-size: 14px;
            width: 100%;
        }

        .calendar th {
            text-align: center;
        }

        .calendar td {
            text-align:center ;
            padding: 1px;
            width: 14.3%;
        }

        .calendar td span {
            display: block;
            color: #555;
            background-color: #F6F6F6;
            border: 1px solid #CCC;
            text-decoration: none;
            padding: 0.2em;
            cursor: pointer;
        }

        .calendar td span:hover {
            color: #FFF;
            background-color: #58453F;
            border: 1px solid #58453F;
        }

        .calendar td.today span {
            background-color: #FFF0A5;
            border: 1px solid #FED22F;
            color: #363636;
        }

我在这里发布导致问题的部分javascript，而不是整个文件

经过调查，我发现当我在选项卡外使用datepicker时，以下变量都有值，而在选项卡内使用时，它们的值分别为0,0

 if(obj.offsetParent) {

     do {
    inputLeft += obj.offsetLeft;
    inputTop += obj.offsetTop;

        alert(inputLeft); // show alert with values when outside of tab, alert is not shown when within tab
        alert(inputTop); // show alert with values when outside of tab, alert is not shown when within tab

} while (obj = obj.offsetParent);
} 

var calendarContainer = buildNode('div', { className: 'calendar' });
calendarContainer.style.cssText = 'display: none; position: absolute; top: ' + (inputTop + this.element.offsetHeight) + 'px; left: ' + inputLeft + 'px; z-index: 100;';
....

任何帮助都将不胜感激

---

您好，John

添加您的css:

.tab内容{position:relative}

。我想这应该能解决你的问题

可能是两件事。此引用的窗口可以替代您创建的节点对象。如果您没有将这个节点附加到dom中，就不可能得到它的实际偏移量。我如何测试它？如果为true，如何将该节点添加到dom？可以使用jQuery创建节点并将其附加到选项卡。或者在纯javascript中，您可以执行

元素.appendChild（calendarContainer）

。然后使用类名再次选择它，并执行math.Hi。谢谢你的帮助，我很感激。有没有可能发送一些代码片段？这取决于您使用的库。嗯。。。如果你能做一把小提琴或者给我寄一个带有你的密码的邮政编码，我可以把它修好。您可以做的另一件事是在输入之后添加元素，使样式位置相对，并使用负值设置边距顶部。