Javascript 将按钮放置在位置为“相对”的图元的右上角

我写了这个剧本：

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

这里我做了一个工作示例：

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

---

非常感谢，Davide。

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

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

将a元素放置在距父元素顶部15像素和距父元素右侧15像素的位置

小提琴更新：

---

编辑：另外，请注意，由于在本例中不必计算位置，因此可以将css直接分配给css文件上的类，并避免不必要的javascript逻辑。

位置：相对不相对于父元素定位元素。它相对于元素的原始位置定位元素

如果要将元素定位在距父元素顶部和右侧15px的位置（只要父元素自身设置了

位置：

，值为

相对

、

绝对

或

固定

），请使用：

如果要将元素定位在距整个页面顶部和右侧15px的位置，请使用：

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

---

在这两种情况下，您都不需要进行javascript位置计算。

我想说，您可能需要

位置：fixed这样它将位于浏览器窗口的左上角，而不是它所在元素的左上角。非常感谢您的回复！不幸的是，我不能这样做，因为我同时拥有相对容器和绝对容器。我可以用相对容器包装我的元素并这样做，但我不知道这是否是个好主意……这不是问题，您可以添加位置：相对于您的.carousel inner，而不影响任何内容（只要您不添加上/右/下/左属性），然后添加位置：绝对；顶部：15px；右：15px；给里面的.助手。检查答案中的小提琴版本5以供参考。不幸的是，我不能这样做。。在我的页面中，我可以有多个元素，固定的、相对的或绝对的，我要做的是分发一个javascript，使这个链接成为每个元素右上角的一个按钮。我真的不知道页面的真正标记。我只知道这个网站是用Twitter引导和jQuery编写的。这就是我用javascript计算坐标的原因。。有多个元素的地方是
position:absolute闪耀。只要有某种容器元素可以定位，那么您就可以使用它作为定位的基础。如果需要，您可以检查父对象的位置，如果未设置，则将其设置为
position:relative不影响父元素的呈现方式（因为您不会为父元素设置上/左/右/下值）。感谢Jeffrey，我终于做到了；）
.carousel-inner{
    position: absolute;
    top: 15px;
    right: 15px;
}

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