将放置按钮放置在位置为相对的元素的右上角

Question

I wrote this script:

var HTML_BT = '<a class="helper" href="#"><i class="icon-wrench"></i></a>';

// Append button
$("my_selector").live('mouseenter', function(){
    var 
        bt = $(this).find('a.helper'),
        pos = $(this).position();

    // Check if the button exists and creates it
    if (bt.length==0){
        bt = $(HTML_BT);
        bt.css({
            position:'absolute',

            // Calculates coordinates
            top:pos.top + 15 + 'px', 
            left:pos.left + $(this).width() - 15 + 'px'

            // .. Some other css like border, bg, color and so on.
        });
        $(this).append(bt);
    }

    // Show the button
    bt.show();

}).live('mouseleave', function(){
    var 
        bt = $(this).find('a.helper');

    // Show the button if exists
    if (bt.length!=0){
        bt.hide();
    }
});

The script shows or appends a link at top/right corner, when the mouse cursor goes on a specific item.

It works fine, but I have some troubles calculating the top and right coordinates on elements placed inside containers that has specified the css position as relative, because the link coordinates are (rightly) calculated as relative of his container.

.carousel-inner{
    position:relative;
}

Here I did a working example: http://jsfiddle.net/ucfKm/

Someone knows how to test if I have to use absolute / relative coordinates or how to get the right left position?

Thanks a lot, Davide.

Answer 1

Instead of calculating the left position to put it on the right and the top position just remember that an absolutely positioned element inside a relatively positioned element will have its 0,0 at the top left corner of the parent, so:

top:15 + 'px', 
right:15 + 'px',

Will position your a element at 15 px from the top of the parent and 15px from the right of the parent.

Fiddle update: http://jsfiddle.net/ucfKm/5/

EDIT: Also, note that because you dont have to calculate the position in this case, you can assign the css directly to the class on your css file, and avoid unnecessary javascript logic.

Answer 2

position: relative; does not position the element relative to the parent. It positions the element relative to that element's original position.

If you want the element to be positioned 15px from the top and right of the parent (as long as the parent has position: set on itself with a value of either relative , absolute , or fixed ), use:

.carousel-inner{
    position: absolute;
    top: 15px;
    right: 15px;
}

If you want the element to be positioned 15px from the top and right of the entire page, use:

.carousel-inner{
    position: fixed;
    top: 15px;
    right: 15px;
}

In either case, you have no need of doing javascript position calculations.