Question

我有一组buttons，正在通过Jquery添加。现在我想点击position这些按钮above the element，所以我试图获取元素的位置并将css属性放到按钮上。

问题是我无法正确定位，我已base element's position为relative而buttons为absolute，即使是试图把亲戚，固定但不起作用。

例如，

我要放置按钮的HTML元素，我通过课程nitssection调用它：

<div class="section nitssection" data-nitsid="6">
    <div class="container">
....
    </div>
</div>

基本元素的位置：

.nitssection {
     position: relative;
}

现在放置按钮：

<div id="#" class="clearfix nitsoption" style="display: none;">
    <a href="#" class="btn btn-circle btn-sm default sorthandle">
        Sort <i class="fa fa-arrows"></i>
    </a>
    <a href="#" class="btn btn-circle btn-sm default">
        Edit <i class="fa fa-pencil-square-o"></i>
    </a>
    <a href="#" class="btn btn-circle btn-sm default">
        Clone <i class="fa fa-clone"></i>
    </a>
    <a href="#" class="btn btn-circle btn-sm default">
        Delete <i class="fa fa-trash"></i>
    </a>
</div>

id的{{1}}为elements，以下是我试图定位按钮的Jquery：

dynamic

正如您在following link中看到的，一旦您点击部分部分，按钮就会显示在下方。

Answer 1

找到解决方案，

我正在计算top并将最高值添加到生成的元素中。当我们在absolute position中添加最高值时，它会计算parent element的最高值，因此在我的问题中，我删除了使用偏移值计算的最高值。以下内容将从代码中删除：

 var x=$(this).offset();
 var xcenter= x.top-30;

所以我的最终代码如下：

$('.nitssection').click(function(e) {
    var nitsbutton = $(this).data("nitsid");
    var y=$(window).innerWidth();
    var ycenter=y/2-200;
    $('#' + nitsbutton).css({
        'position' : "absolute"
        , 'top': -35
        , 'left': ycenter
        , 'z-index': "99999"

    }).fadeIn(400).click(function (e) {
        e.preventDefault();
    });
    $(this).click(function(e){
        e.stopPropagation();
    })
});

希望它可以帮助某人...... :)

在css中定位具有绝对位置的动态按钮

1 个答案: