通过javascript添加动态HTML时，位置绝对表现得像位置固定

Question

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

http://jsfiddle.net/eejpjch3/

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

@RequestParam

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

感谢您的帮助。

Answer 1

绝对定位基于它具有相对定位的第一个父项。由于您没有相对定位的项目，因此它将成为相对的窗口。 添加

  

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

会达到你想要的效果

Answer 2

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

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

.upper-controls {
    position: relative;
}

JSFiddle Link

Answer 3

您尚未指定位置：相对于删除按钮的父元素

你应该将以下课程添加到你的样式表

.row-fluid { 
position: relative; 
}

绝对位置相对于其父母的位置。有关更多参考，请查看以下链接：http://www.w3schools.com/css/css_positioning.asp