Question

我写了这个剧本：

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/

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

非常感谢，Davide。

Answer 1

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

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

将您的元素从父级顶部放置15 px，从父级右侧放置15px。

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

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

Answer 2

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

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

fixed

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

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

在任何一种情况下，您都不需要进行javascript位置计算。

将按钮放在元素右上角，位置为：relative

2 个答案: