为什么jSignature div移动到浏览器窗口的左上角？

Question

我正在使用Bootstrap，我正在尝试将jSignature小部件添加到表单中。我按照他们网站上的说明添加了一个div（在我的情况下有一个id为“签名”），然后使用以下内容...

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<script src="libs/jSignature.min.js"></script>
<div id="signature"></div>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

包含div的表单部分看起来像这样......

<div class="form-group">
 <label for="signature"class = "col-md-2 control-label">Signature</label>
  <div class="col-md-10">
    <div id="signature"></div>
  </div>
</div>

这与表单的其余部分完全相同。

然而，当我在浏览器中查看此内容时，jSignature小部件显示在窗口的左上角，部分被Bootsrap导航栏遮挡，而不是应该在标签旁边。

如果我查看源代码，签名div就在正确的位置，但Chrome开发人员工具显示它已被移动到body标签的最开头，这可能是为什么它最终会在

任何人都知道为什么这样做？我希望它能保持原样。