通过javascript添加动态HTML时，绝对位置的行为类似于位置固定

Question

这是我遇到问题的代码示例：

http://jsfiddle.net/eejpjch3/

我试图在悬停时在 HTML 元素上方添加一个动态删除按钮。例如，当我有以下 HTML 时：

   <div class="row-fluid" object="columns-editable">
        <div class="col-md-6" object="column-editable">Column 1</div>
        <div class="col-md-6" object="column-editable">Column 2</div>
    </div>
    <div class="row-fluid" object="columns-editable">
        <div class="col-md-6" object="column-editable">Column 1</div>
        <div class="col-md-6" object="column-editable">Column 2</div>
    </div>

对于每一行，当用户悬停时，该行上方会弹出一个图标，允许他们删除该行。但是，当我在代码中执行此操作时，删除按钮的位置仍然位于第一行的顶部，即使它设置为绝对位置。

感谢您的帮助。

Answer 1

绝对定位基于它具有相对定位的第一个父级工作。由于您没有相对定位的项目，它将是相对的窗口。添加

.row-fluid { 位置：相对；}

会达到你想要的

Answer 2

为什么不使用relative定位呢？这是使用一些替代样式规则的示例，特别是

.icon {
    float:right;
    position: relative;
    bottom: 15px;
}

.upper-controls {
    position: relative;
}

JSFiddle 链接