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 hoverin

Answer 1

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

Answer 2

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 3

You have not specified position:relative to parent element of the delete button

you shoud add following class to your style sheet

.row-fluid { 
position: relative; 
}

Position absolute takes position with relative to its parents. for more reference you can check following link: http://www.w3schools.com/css/css_positioning.asp