spin.js顶部选项不工作

Question

我试着使用spin.js

我希望它在div元素的中间弹出。所以我设定了：

职位：“相对”顶部：“50%”左边：“50%”

但最重要的选择行不通。在分析了这个问题之后，我可以将其分解为html/css问题：

<div style="background-color: red">
    <div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
    1st div line<br>br line<br>br line 2
    <div>div line 1</div>
    <div>div line 2</div>
</div>

在这个示例中，蓝色元素应该位于红色的中间，但它不是。下面是它的填充：

http://jsfiddle.net/exu77/obcg3cxv/

这是spin.js原始版本的柱塞

http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview

Answer 1

必须将position:relative应用于父元素，即包含自旋器的div。旋转器本身需要position:absolute (这是默认的)。下面是柱塞的更新版本，其中旋转器位于红色框中：http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview。

Answer 2

我能够通过向jsSpinner div增加一个高度来使它工作。

<div id="jsSpinner" style="background-color:red; height: 100px;">spin in the red part
<br>br line
<br>br line 2
<div>div line</div>
<div>div line 2 </div>

​

为什么要这么做？那部分我不知道。