Position absolute behaving like position fixed when adding dynamic HTML via javascript

Question

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

http://jsfiddle.net/eejpjch3/

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.

Thank you for your help.

Answer 1

Absolute positioning works based on the first parent it has with a relative positioning. Since you have no items with relative positioning it'll be the window that is relative. Adding

.row-fluid { position: relative; }

Would achieve what you want

Answer 2

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;
}

JSFiddle Link