通过JavaScript添加动态HTML时的位置绝对行为与位置固定类似 [英] Position absolute behaving like position fixed when adding dynamic HTML via javascript

问题描述

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

Here's the code example I'm having problems with:

http://jsfiddle.net/eejpjch3/

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

I'm trying to add a dynamic delete button above HTML elements when hovering. For instance when I have the following 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>

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

For each row, when the user hovers, an icon pops up above that row which allows them to delete the row. However, when I'm doing this in the code, the position of the delete button stays positioned at the top of the first row even though it's set to an absolute position.

感谢您的帮助.

推荐答案

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

Why not use relative positioning? Here is your example using some alternative style rules, specifically

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

.upper-controls {
    position: relative;
}

这篇关于通过JavaScript添加动态HTML时的位置绝对行为与位置固定类似的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！