用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中的絕對位置定位動態按鈕

回答

相關問題