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

/

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.

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

http://jsfiddle/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.

• javascript
• jquery
• html
• css

• 1 .row-fluid { position: relative; } – Mihey Egoroff Commented Apr 22, 2015 at 17:10

3 Answers 3

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

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

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./css/css_positioning.asp