0

我写了这个脚本：

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

当鼠标光标移到特定项目上时，脚本会在右上角/右上角显示或附加链接。

它工作正常，但我在计算放置在容器内的元素的顶部和右侧坐标时遇到了一些麻烦，这些元素已将 css 位置指定为相对，因为链接坐标（正确地）计算为相对于他的容器。

.carousel-inner{
    position:relative;
}

在这里我做了一个工作示例：http: //jsfiddle.net/ucfKm/

有人知道如何测试我是否必须使用绝对/相对坐标或如何获得右左位置？

非常感谢，戴维德。

4

2 回答 2

1

不要计算左侧位置以将其放在右侧和顶部位置，只需记住相对定位元素内的绝对定位元素将在父级的左上角具有其 0,0，因此：

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

将您的 a 元素定位在距父级顶部 15 像素和距父级右侧 15 像素处。

小提琴更新：http: //jsfiddle.net/ucfKm/5/

编辑：另外，请注意，因为在这种情况下您不必计算位置，您可以将 css 直接分配给 css 文件上的类，并避免不必要的 javascript 逻辑。

于 2013-04-10T13:32:08.833 回答
0

position: relative;不相对于父元素定位元素。它相对于该元素的原始位置定位元素。

如果您希望元素位于距父级顶部和右侧 15px 的位置（只要父级已将position:其自身设置为 、 或 的值relative）absolute，请fixed使用：

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

如果您希望元素位于距离整个页面的顶部和右侧 15px 的位置，请使用：

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

无论哪种情况，您都不需要进行 javascript 位置计算。

于 2013-04-10T13:37:07.280 回答