用css中的绝对位置定位动态按钮

我有一组buttons，它是通过Jquery添加的。现在我想要position这些按钮完全通过点击above the element，所以我试图获取元素的位置并将css属性放到按钮上。用css中的绝对位置定位动态按钮

问题是我不能够适当的位置，我做了base element's position为relative和buttons为absolute，即使我试图把相对的，固定的，但它不工作。

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

基础元件的位置：

例如，在这里我要放置按钮

HTML元素，我通过nitssection类调用它

.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>

在 elements的

id是dynamic和下面就是我试图定位按钮Jquery的：

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

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

正如你可以在following link看到，一旦你点击了部分零件，按钮正在显示在下面。

来源

2016-08-03 Nitish Kumar

你要添加上述nitssection或内部按钮nitssection的容器？ – BakerStreet221

@Pratham高于nitssection。 –

好的，所以点击nitssection div另一个div应该出现在包含按钮的nitssection div上面。对？ – BakerStreet221

实测出该解决方案，

我被计算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(); 
    }) 
});

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

来源

2016-08-04 06:00:14

用css中的绝对位置定位动态按钮

回答

相关问题