Question

我正在使用一些javascript在我的文本框下面放置一个绝对元素。

然而，当我尝试获取offsetTop时，我得到了表单组的顶部而不是输入的顶部。我无法弄清楚原因。

我的HTML：

<div class="container-fluid">
    <div style="width: 300px;">
        <div class="form-group" style="position: relative;">
            <label>Start Date</label>
            <div class="input-group">
                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
                <input type="text" class="form-control" id='testInput' />
            </div>
        <div id='testOverlay'>Test</div>    
    </div>
</div>

和javascript：

(function test() {
    let inputEl = document.getElementById("testInput");
    let inputTop = inputEl.offsetTop;
    let inputHeight = inputEl.offsetHeight;
    console.log(inputTop, inputHeight);

    let overlayEl = document.getElementById("testOverlay");
    overlayEl.style.top = (inputTop + inputHeight) + "px";
})();

这是一个显示问题的傻瓜：

https://plnkr.co/edit/yiEDl3Bo3I2e5vmv2BfF?p=preview

正如你所看到的，绝对元素位于输入组的中间而不是像我期望的那样低于它。

有关为何发生这种情况的任何帮助？

编辑：我发现将输入组类重写为

.input-group {
    position: static;
}

解决了这个问题。我想知道这是否是一个bootstrap bug？

Bootstrap 4输入组顶部包含标签

0 个答案: